HTML5 Canvas

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

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为
渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

实例

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

你的浏览器不支持 HTML5 的 元素.

JavaScript:

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

// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);

// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

使用 createRadialGradient():

实例

创建一个径向/圆渐变。使用渐变填充矩形：

你的浏览器不支持 HTML5 的 元素.

JavaScript:

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

// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);

// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Canvas – 图像

把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)

使用图像:

实例

把一幅图像放置到画布上:

你的浏览器不支持 HTML5 的 元素.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

HTML Canvas 参考手册

标签的完整属性可以参考Canvas 参考手册.

HTML 标签

更多内容可参考：学习 HTML5 Canvas 这一篇文章就够了