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();