canvas教程 （六） 颜色渐变

linux_wuliqiang

除了 CSS 颜色， fillStyle和 strokeStyle 属性可以设置为 CanvasGradient 对象。——通过 CanvasGradient可以为线条和填充使用颜色渐变。欲创建 CanvasGradient对象，可以使用两个方法：createLinearGradient 和 createRadialGradient。前者创建线性颜色渐变，后者创建圆形颜色渐变。创建颜色渐变对象后，可以使用对象的 addColorStop方法添加颜色中间值。下面的代码演示了颜色渐变使用方法：
复制内容到剪贴板

• // You need to provide the source 和 destination (x,y) coordinates     
• // for the gradient (from where it starts 和 where it ends).   
• var gradient1 = context.createLinearGradient(sx, sy, dx, dy);   
• // Now you can add colors in your gradient.   
• // The first argument tells the position for the color in your gradient. The     
• // accepted value range is from 0 (gradient start) to 1 (gradient end).   
• // The second argument tells the color you want, using the CSS color format.   
• gradient1.addColorStop(0,   ’#f00′); // red   
• gradient1.addColorStop(0.5, ‘#ff0′); // yellow   
• gradient1.addColorStop(1,   ’#00f’); // blue   
• // For the radial gradient you also need to provide source   
• // 和 destination circle radius.   
• // The (x,y) coordinates define the circle center points (start 和     
• // destination).   
• var gradient2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);   
• // Adding colors to a radial gradient is the same as adding colors to linear     
• // gradients.