W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML Canvas 渐变



Canvas - 渐变

渐变可用于填充矩形,圆形,线条,文字等。画布上的形状不限于纯色。

有两种不同类型的渐变:

  • createLinearGradient(x,y,x1,y1) - 创建一个线性渐变
  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆形渐变

一旦我们有一个渐变对象,我们必须添加两个或更多的颜色停止。

addColorStop() 方法指定颜色停止,以及其沿渐变的位置。渐变位置可以在0到1之间的任意位置。

要使用渐变,请将 fillStyle 或 strokeStyle 属性设置为渐变,然后绘制形状(矩形,文本或线)。


使用 createLinearGradient()

Example

创建线性渐变。用渐变填充矩形:

Your browser does not support the HTML5 canvas tag.

JavaScript:

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

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
尝试一下 »

使用 createRadialGradient()

Example

创建径向/圆形渐变。用渐变填充矩形:

Your browser does not support the HTML5 canvas tag.

JavaScript:

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

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
尝试一下 »