Canvas支持基本绘图能力的2D上下文，以及基于WebGL的3D上下文

基本用法

要使用canvas元素,必须先设置其width和height属性,指定可以绘图的区域大小.出现在开始和结束标签中的内容是后备信息,如果浏览器不支持就显示这些信息：

<canvas>Canvas here.</canvas>

要在这块画布上绘图,需要取得绘图上下文,则需要调用getContext()方法并传入上下文的名字,例如传入"2d"；

var drawing = document.getElementById("drawing"); //确定浏览器是否支持canvas元素 if (drawing.getContext) { var context = drawing.getContext("2d"); }

可以使用toDataURL()方法导出在canvas元素上绘制的图像如：

var drawing = document.getElementById("drawing"); //确定浏览器是否支持canvas元素 if (drawing.getContext) { //取得图像数据的URL var imgURL = drawing.toDataURL("image/png"); //显示图像 var image = document.createElement("img"); image.src = imgURL; document.body.appendChild(image); }

举个例子：

var drawing = document.getElementById("drawing"); //确定浏览器是否支持canvas元素 if (drawing.getContext) { var context = drawing.getContext("2d"); context.fillStyle = "gray"; context.fillRect(100, 100, 100, 100); context.fillStyle = "#ccc"; context.fillRect(100, 10, 100, 100); //取得图像数据的URL var imgURL = drawing.toDataURL("image/png"); //显示图像 var image = document.createElement("img"); image.src = imgURL; document.body.appendChild(image); } 填充和描边（基本操作）

填充,就是用指定的样式填充图形;描边,就是只在图形的边缘画线,分别涉及到两个属性:

fillStyle：填充

strokeStyle：描边

这两个属性接收值是字符串、渐变对象或模式对象，默认值是“#000000”：

var drawing = document.getElementById("drawing"); //确定浏览器是否支持canvas元素 if (drawing.getContext) { var context = drawing.getContext("2d"); //描边颜色 context.strokeStyle = "red"; //填充颜色 context.fillStyle = "#ccc"; //描边矩形 context.strokeRect(10, 10, 50, 50); //填充矩形 context.fillRect(10, 10, 50, 50); } 绘制矩形 基本方法

四个方法都是接收4个参数:矩形的x坐标,矩形的y坐标,矩形的宽度和矩形的高度.这些参数的单位都是像素；

如填充一个矩形：

var drawing = document.getElementById("drawing"); //确定浏览器是否支持canvas元素 if (drawing.getContext) { var context = drawing.getContext("2d"); context.fillStyle = "orange"; context.fillRect(10, 10, 50, 50); }

如描边一个矩形：

var drawing = document.getElementById("drawing"); //确定浏览器是否支持canvas元素 if (drawing.getContext) { var context = drawing.getContext("2d"); context.strokeStyle = "red"; context.strokeRect(10, 10, 50, 50); }

又如清除画布上的矩形区域：

var drawing = document.getElementById("drawing"); //确定浏览器是否支持canvas元素 if (drawing.getContext) { var context = drawing.getContext("2d"); context.fillStyle = "red"; context.fillRect(10, 10, 50, 50); context.clearRect(12, 12, 46, 46); } 控制描边的线条 绘制路径

要绘制路径,首先必须调用beginPath()方法,表示要开始绘制新路径.然后,再通过调用下列方法来实际的绘制路径

beginPath()：该方法表示开始绘制路径

其次使用下面的方法绘制路径：

结束绘制路径之前，可以检测某个坐标是否在路径轨迹上：

isPointInPath()：返回布尔值

结束绘制路径之后，可以选择使用下面的方法进一步处理：

如：

var drawing = document.getElementById("drawing"); //确定浏览器是否支持canvas元素 if (drawing.getContext) { var context = drawing.getContext("2d"); context.beginPath(); //绘制外圆 context.arc(100, 100, 99, 0, 2 * Math.PI, false); //绘制内圆 context.moveTo(194, 100); context.arc(100, 100, 94, 0, 2 * Math.PI, false); //绘制分针 context.moveTo(100, 100); context.lineTo(100,15); //绘制时针 context.moveTo(100, 100); context.lineTo(35,100); context.stroke(); } 绘制文本

绘制文本通常有两个方法:

这两个方法都可以接收4个参数:要绘制的文本字符串,x坐标,y坐标和可选的最大像素值.而且这三个方法都以下列3个属性为基础:

如：

var drawing = document.getElementById("drawing"); //确定浏览器是否支持canvas元素 if (drawing.getContext) { var context = drawing.getContext("2d"); //font样式 context.font = "24px monospace"; //对齐方式 context.textAlign = "start"; //基线位置 context.textBaseline = "bottom"; //填充样式 context.fillStyle = "red"; context.fillText("hello there",100,100); //描边样式 context.strokeStyle = "yellow"; context.strokeText("hello there",100,100); }

对于measureText()方法，会返回测量字符串相关数据的一个对象，目前只有width属性

console.log(context.measureText("Hello world")); //返回TextMetrics对象，该对象目前只有width属性 变换

方法是乘以如下矩阵:

m1_1 m1_2 dx m2_1 m2_2 dy 0 0 1

setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy):将变换矩阵重置为默认状态,然后再调用transform

如：

var drawing = document.getElementById("drawing"); //确定浏览器是否支持canvas元素 if (drawing.getContext) { var context = drawing.getContext("2d"); context.beginPath(); context.arc(100, 100, 90, 0, 2 * Math.PI, false); //变换原点 context.translate(100, 100); context.moveTo(0, 0); //旋转 context.rotate(1); context.lineTo(0, -80); context.stroke(); }

而我们可以通过

save()

在堆栈中保存设置,而通过

restore()

方法恢复上一级状态.我们可以连续使用save()和restore()方法。

var drawing = document.getElementById("drawing"); //确定浏览器是否支持canvas元素 if (drawing.getContext) { var context = drawing.getContext("2d"); context.fillStyle = "red"; context.save(); //第一次存储 context.fillStyle="yellow"; context.translate(100,100); context.save(); //第二次存储 context.fillStyle = "blue"; context.fillRect(0,0,100,200); //因为translate把原点放在了100,100所以，从这个点开始绘制 context.restore(); //第一次恢复 context.fillRect(10,10,100,200); //绘制黄色图形因为运用了一次restore(); context.restore(); //第二次恢复 context.fillRect(0,0,100,200); //原点恢复为0,0，绘制红色图形，因为又运用了一次restore(); }

要注意的是，save()保存的只是对绘图上下文的设置和变换，不会保存绘图上下文的内容。

绘制图像

使用

drawImage()

方法来绘制图像.有三种不同的参数组合:

传入一个HTML<img>元素,以及绘制该图像的起点的x和y坐标.

如：

context.drawImage(img, 0, 0); //从0,0处插入绘制图片

再多传两个参数,分别表示目标宽度和目标高度(进行缩放，不影响上下文的变换矩阵)

如：

context.drawImage(img, 0, 0,300,200); //从0,0处插入绘制图片；长度为300高度为200；

再多传4个参数,表示目标图像的x,y坐标和目标图像的宽度和高度(并没有进行缩放):

如：

context.drawImage(img, 0, 0, 300, 200,100,100,100,80); //从0,0处插入绘制图片；长度为300高度为200；绘制到上下文的100,100处，宽度为100高度为80；

需要注意的是：图像不能来自其他域，否则toDataURL()会抛出错误。

阴影