渐变 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

<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script> 
    function draw() {
         var canvas=document.getElementById("cava1");
         var ctx=canvas.getContext("2d");  
       // 创建线性渐变
        var grd = ctx.createLinearGradient(0, 0, 200, 0);
        grd.addColorStop(0, "blue");
        grd.addColorStop(1, "red"); 
        // 填充渐变
        ctx.fillStyle = grd;
        ctx.fillRect(10, 10, 150, 80);
    } 
    draw(); 
</script>

示例：径向渐变

image.png

<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script> 
    function draw() {
         var canvas=document.getElementById("cava1");
         var ctx=canvas.getContext("2d");  
       // 创建径向渐变
        var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
        grd.addColorStop(0, "blue");
        grd.addColorStop(1, "red");
         // 填充渐变
        ctx.fillStyle = grd;
        ctx.fillRect(10, 10, 150, 80);
    } 
    draw(); 
</script>

其它文章请访问：

参考：路径-CanvasAPI|MDN