HTML5 - Canvas的使用样例13（使用渐变色进行填充）

2016-02-16 发布：hangge 阅读：1289

Canvas支持线性渐变填充，和放射性渐变填充。同时，这两种渐变形式都支持多种颜色混合。

1，线性渐变

（1）要创建线性渐变，我们需要给 createLinearGradient() 传入两个坐标点，分别表示渐变的起点和终点。起点和终点构成了颜色逐渐过渡的区间。

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(1, "yellow");
 
//填充渐变色
context.fillStyle = gradient;
context.fill();
context.stroke();

（2）设置渐变颜色，需要使用渐变对象的 addColorStop() 方法。调用这个方法，除了需要提供颜色值（颜色名），还需要提供一个0~1的偏移值。0表示位于渐变的起点，1表示位于渐变的终点。

通过多次调用 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();