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

徑向漸變

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

 

// 1. 建立徑向漸變

var radialG = pen.createRadialGradient(200, 200, 50, 200, 200, 100);    // 圓心x，圓心y，半徑，老是從第二個圓但是漸變

 

// 2. 添加漸變色

linearG = addColorStop(0, 'red');

linearG = addColorStop(0.5, 'green');

linearG = addColorStop(1, 'blue');

 

pen.beginPath();

pen.rect(0, 0, 400, 400);

pen.fill();