• 在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);
        }