用html5颜色自动渐变,HTML5 - Canvas的使用样例13（使用渐变色进行填充）

通过多次调用 addColorStop() 方法，我们可以创建多种颜色构成的渐变。

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

//边框线条宽度

context.lineWidth = 2;

//边框线条颜色

context.strokeStyle = "#c0c0c0";

//绘制路径

context.moveTo(200, 50);

context.lineTo(100, 150);

context.lineTo(300,150);

context.closePath();

//创建一个从(150,0)到(250,0)的渐变

var gradient = context.createLinearGradient(150, 0, 250, 0);

//添加多种颜色

gradient.addColorStop(0, "magenta");

gradient.addColorStop(0.25, "blue");

gradient.addColorStop(0.5, "green");

gradient.addColorStop(0.75, "yellow");

gradient.addColorStop(1, "red");

//填充渐变色

context.fillStyle = gradient;

context.fill();

context.stroke();

2，放射性渐变

(1)要创建放射性渐变，我需要使用 createRadialGradient()指定两个圆。因为放射性渐变就是颜色从一个小圆过渡到一个更大、包含它的圆。

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

//边框线条宽度

context.lineWidth = 2;

//边框线条颜色

context.strokeStyle = "#c0c0c0";

//绘制路径

context.moveTo(200, 50);

context.lineTo(100, 150);

context.lineTo(300,150);

context.closePath();

//渐变起点是坐标为(200,100)，半径10的圆。终点是相同圆心坐标，半径50的圆

var gradient = context.createRadialGradient(200, 100, 10, 200, 100, 50);

//添加两种颜色

gradient.addColorStop(0, "magenta");

gradient.addColorStop(1, "yellow");

//填充渐变色

context.fillStyle = gradient;

context.fill();

context.stroke();

(2)同样通过多次调用 addColorStop() 方法，可以实现多色放射性渐变效果。

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

//边框线条宽度

context.lineWidth = 2;

//边框线条颜色

context.strokeStyle = "#c0c0c0";

//绘制路径

context.moveTo(200, 50);

context.lineTo(100, 150);

context.lineTo(300,150);

context.closePath();

//渐变起点是坐标为(200,100)，半径10的圆。终点是相同圆心坐标，半径50的圆

var gradient = context.createRadialGradient(200, 100, 10, 200, 100, 50);

//添加多种颜色

gradient.addColorStop(0, "magenta");

gradient.addColorStop(0.25, "blue");

gradient.addColorStop(0.5, "green");

gradient.addColorStop(0.75, "yellow");

gradient.addColorStop(1, "red");

//填充渐变色

context.fillStyle = gradient;

context.fill();

context.stroke();