Canvas的渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
注意:使用渐变必须使用两种或两种以上的颜色。
Canvas渐变有两种方法:
-
线性 渐变
createLinearGradient(x1, y1, x2, y2)
x1、y1表示渐变色开始点的坐标
x2、y2表示渐变色结束点的坐标
注:渐变的方向是从 x1y1 到 x2y2,如果y相同,那就是从左到右渐变,如果x相同,就是从上到下渐变,斜着渐变就需要自己调整两个位置的坐标了 -
径向/圆 渐变
createRadialGradient(x1, y1, r1, x2, y2, r2)
x1、y1表示渐变开始圆心的坐标,r1表示渐变开始圆心的半径
x2、y2表示渐变结束圆心的坐标,r2表示渐变结束圆的半径。
注:当起点圆与终点圆的圆心坐标相同时,会有一种圆形渐变的效果
Canvas添加颜色的方法(指定停止颜色):addColorStop(value, color)
value:坐标来描述渐变的位置,取值 0~1(可以理解成整个渐变是0-100%的位置,从而设定在百分比位置的颜色)
color:渐变结束的颜色(停止颜色)
示例:
线性渐变:
// myCanvas 是canvas标签的ID
var canvas = document.getElementById("myCanvas");
if (canvas && canvas.getContext) {
let ctx = canvas.getContext("2d");
let grad = ctx.createLinearGradient(0, 150, 200, 150); // 创建一个渐变色线性对象
grad.addColorStop(0, "rgba(240,250,40,1)"); // 设置渐变颜色
grad.addColorStop(0.25, "rgba(327,201,64,1)");
grad.addColorStop(0.5, "rgba(22,184,200,1)");
grad.addColorStop(1, "rgba(82,67,192,1)");
ctx.fillStyle = grad; // 设置fillStyle为当前的渐变对象
ctx.fillRect(0, 0, 400, 400); // 绘制渐变图形
}
径向/圆渐变
var canvas = document.getElementById("myCanvas");
if (canvas && canvas.getContext) {
let ctx = canvas.getContext("2d");
let grad = ctx.createRadialGradient(200, 200, 50, 260, 260, 200) // 创建一个渐变色径向/圆对象
// let grad = ctx.createRadialGradient(200, 200, 50, 200, 200, 200) // 圆形渐变效果
grad.addColorStop(0, "rgba(240,250,40,1)"); // 设置渐变颜色
grad.addColorStop(0.25, "rgba(327,201,64,1)");
grad.addColorStop(0.5, "rgba(22,184,200,1)");
grad.addColorStop(1, "rgba(82,67,192,1)");
ctx.fillStyle = grad; // 设置fillStyle为当前的渐变对象
ctx.fillRect(0, 0, 500, 500); // 绘制渐变图形
}