canvas 线条渐变追逐_canvas之渐变

timg (1).jpg

渐变 Gradients

可以用线性或者径向的渐变来填充或描边赋给图形的 fillStyle 或 strokeStyle 属性。

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

使用渐变对象，必须使用两种或两种以上的停止颜色。

以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x1, y1, x2, y2)      创建线性渐变

接受 4 个参分别表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

createRadialGradient(x1, y1, r1, x2, y2, r2)     创建一个径向/圆渐变

接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

示例：

var lineargradient = ctx.createLinearGradient(0,0,150,150);

var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);

上色：

gradient.addColorStop(position, color)

addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值(如 #FFF， rgba(0,0,0,1))。

示例：线性渐变

image.png

function draw() {

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

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

// 创建线性渐变

var grd = ctx.createLinearGradient(0, 0, 200, 0);

grd.addColorStop(0, "blue");

grd.addColorStop(1, "red");

// 填充渐变

ctx.fillStyle = grd;

ctx.fillRect(10, 10, 150, 80);

}

draw();

示例：径向渐变

image.png

function draw() {

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

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

// 创建径向渐变

var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);

grd.addColorStop(0, "blue");

grd.addColorStop(1, "red");

// 填充渐变

ctx.fillStyle = grd;

ctx.fillRect(10, 10, 150, 80);

}

draw();

其它文章请访问：