渐变和canvas渐变矩形

版权声明：部分来源于网络仅供学习交流 https://blog.csdn.net/Chad97/article/details/83547457

• 在canvas中实现渐变有2种方式

1. 第一种：通过遍历点的值实现
2. 第二种：创建渐变的方案——createLinearGradient

第一种：

<canvas width="600" height="400"></canvas>


var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

ctx.lineWidth = 30;
    for (var i = 0; i < 255; i++) {
        ctx.beginPath();
        ctx.moveTo(100+i-1,100);
        ctx.lineTo(100+i,100);
        ctx.strokeStyle = 'rgb('+i+',0,0)';
        ctx.stroke();
    }

第二种：

<canvas width="600" height="400"></canvas>

var linerGradiebt=ctx.createLinearGradient(100,100,300,300);
    linerGradiebt.addColorStop(0,'pink');
    linerGradiebt.addColorStop(0.5,'red');
    linerGradiebt.addColorStop(1,'blue');

    ctx.fillStyle=linerGradiebt;
    ctx.fillRect(100,100,300,100);

css方法对比：

 .linearGradient{
            width: 300px;
            height: 100px;
            /*background-image: linear-gradient(to right,pink,blue);*/
            background-image: linear-gradient(45deg,pink,blue);
        }