线性渐变

createLinearGradient（x1,y1,x2,y2）
设置一个区域线性渐变，不能设置渐变颜色
参数： 4
第一对参数为 x1 与 y1 的坐标
第二对参数为 x2 与 y2 的坐标
这两对参数将设置一个渐变区域
注意的是，默认从坐标轴原点的位置开始填充线性渐变
addColorStop()
关键帧
参数 ：2
第一个参数 只能 0 到1 的数字
第二参数 颜色值
代码如下

    <canvas id="canvas" width="500" height="500" style="width: 500px; height: 500px; border: 1ex solid black;"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var bg = ctx.createLinearGradient(0,0,100,100) // 设置线性渐变的区域
        bg.addColorStop(0,'white') // 关键帧 第一个参数 只能0 到 1
        bg.addColorStop(1,'black')
        ctx.fillStyle= bg;
        ctx.translate(100,100) // 默认从坐标原点开始填充渐变
        ctx.fillRect(0,0,100,100);
    </script>

效果图