通过创建一个gradient对象,在绘制图形前赋值于上下文(context)中,从而达到颜色渐变效果,渐变效果可用于填充矩形、圆形、线条、文本等等。

HTML5 Canvas 中的渐变分为线性渐变和径向渐变(也被称之为扩散性渐变)。相关方法:

// 创建线性渐变
// x0:渐变开始点的 x 坐标
// y0:渐变开始点的 y 坐标
// x1:渐变结束点的 x 坐标
// y1:渐变结束点的 y 坐标
context.createLinearGradient(x0,y0,x1,y1);

// 创建径向渐变
// 渐变的开始圆的 x 坐标
// 渐变的开始圆的 y 坐标
// 开始圆的半径
// 渐变的结束圆的 x 坐标
// 渐变的结束圆的 y 坐标
// 结束圆的半径
context.createRadialGradient(x0,y0,r0,x1,y1,r1);

// 增加规定渐变对象中的颜色和停止位置
// stop:介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
// color:在结束位置显示的 css 颜色值
gradient.addColorStop(stop, color);

createLinearGradientcreateRadialGradient 创建出的 gradient 对象必须使用 addColorStop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色。


线性渐变

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

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop(0,"black");
gradient.addColorStop("0.7","yellow");
gradient.addColorStop(1,"red");

ctx.fillStyle=gradient;
ctx.fillRect(20,20,160,100);


径向渐变

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

var gradient=ctx.createRadialGradient(100,100,5,100,100,100);
gradient.addColorStop(0,"black");
gradient.addColorStop("0.7","yellow");
gradient.addColorStop(1,"red");

ctx.fillStyle=gradient;
ctx.fillRect(20,20,160,160);


文字颜色渐变示例

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

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop(0,"black");
gradient.addColorStop("0.7","yellow");
gradient.addColorStop(1,"red");

ctx.font="30px Verdana";
ctx.fillStyle=gradient;
ctx.fillText("Hello World!",10,70);

ctx.font="30px Verdana";
ctx.strokeStyle=gradient;
ctx.strokeText("Hello World!",10,120);

Like The Article To View All

All Comments

Leave a Reply Cancel Reply

Tips: Your email address will not be disclosed!

If you can't see clearly,please click to change...