HTML5_canvas_线性渐变

canvas 线性渐变

var linearG = pen.createLinearGradient(startX, startY, endX, endY);

亮点的连线，决定了渐变的方向，和区间

var pen = myCanvas.getContext("2d");

// 1. 创建线性渐变

var linearG = pen.createLinearGradient(50, 50, 100, 100);

// 2. 添加渐变色

linearG = addColorStop(0, 'red');

linearG = addColorStop(0.5, 'green');

linearG = addColorStop(1, 'blue');

pen.beginPath();

pen.rect(50, 50, 50, 50);

pen.fill();