canvas之渐变

timg (1).jpg

渐变 Gradients

可以用线性或者径向的渐变来填充或描边赋给图形的 fillStyle 或 strokeStyle 属性。
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
使用渐变对象，必须使用两种或两种以上的停止颜色。

以下有两种不同的方式来设置Canvas渐变：

• createLinearGradient(x1, y1, x2, y2)      创建线性渐变
       接受 4 个参分别表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
• createRadialGradient(x1, y1, r1, x2, y2, r2)     创建一个径向/圆渐变
       接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
  示例：
  var lineargradient = ctx.createLinearGradient(0,0,150,150);
  var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);

上色：

gradient.addColorStop(position, color)
addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)）。

示例：线性渐变

image.png

示例：径向渐变

image.png

其它文章请访问：

• canvas入门
• canvas之渐变
• canvas之文本
• canvas之图像
• canvas之变形

参考：路径-CanvasAPI|MDN