HTML5 Canvas标签使用收录

一、基本概念

什么是canvas

<canvas>是一个新的html元素，这个元素在html5 中被定义。这个元素通常可以被用来在html页面中通过javascript进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前html5规范还在草稿阶段，正式发布也许要等到2010年，不过现在已经有不少浏览器已经支持了部分html5规范。目前支持canvas元素的浏览器有firefox3+、safari4、chrome2.0+等，因此，在运行本页中的例子时，请确保你使用的是上述浏览器之一。

尽管在mozilla 已经有不少关于canvas的教程，我还是决定把自己的学习过程记录下来。如果觉得我写的不够明白，那么你可以在参考资料中找到mozilla网站上canvas教程的链接。

另外，可以在这里 找到一些有趣的canvas示例

开始使用canvas

使用canvas很简单，与使用其他html元素一样，只需要在页面中添加一个<canvas>标签即可：

代码如下:

<canvas id=̶分米的字母是什么1;screen” width=”400″ height=”400″></canvas>

当然，这样只是简单的创建了一个canvas对象而已，并没有对它进行任何操作，这个时候的canvas元素看上去与div元素是没什么区别的，在页面上什么都看不出来：）
另外，canvas元素的大小可以通过width与height属性来指定，这与img元素有点相似。

canvas的核心：context
前面说到可以通过javascript来操作canvas对象来进行绘制图形、合成图像等操作，这些操作并不是通过canvas对象本身来进行的，而是通过canvas对象的一个方法getcontext获取canvas操作上下文来进行。也就是说，在后面我们使用canvas对象的过程中，都是与canvas对象的context打交道，而canvas对象本身可以用来获取canvas对象的大小等信息。
要获取canvas对象的context很简单，直接调用canvas元素的getcontext方法即可，在调用的时候需要传递一个context类型参数，目前可以用的并且是唯一可以用的类型值就是2d：

<canvas id=”screen” width=”400″ height=”400″></canvas>
<script type=”text/javascript”>
var canvas = document.getelementbyid(“screen”);
var ctx = canvas.getcontext(“2d”);
</script>

firefox3.0.x的尴尬

firefox3.0.x虽然支持了canvas元素，但是并没有完全按照规范来实现，规范中的filltext、 measuretext两个方法在firefox3.0.x中被几个firefox特有的方法代替，因此在firefox3.0.x中使用canvas时需要先fix这个几个方法在不同浏览器中的差别。

下面这代码取自mozillabespin 项目，它修正了firefox3.0.x中canvas的context对象与html5规范不一致的地方：

function fixcontext(ctx) {
// * upgrade firefox 3.0.x text rendering to html 5 standard
if (!ctx.filltext && ctx.mozdrawtext) {
ctx.filltext = function(texttodraw, x, y, maxwidth) {
ctx.translate(x, y);
ctx.moztextstyle = ctx.font;
ctx.mozdrawtext(texttodraw);
ctx.translate(-x, -y);
};
}
// * tup measuretext
if (!ctx.measuretext && ctx.mozmeasuretext) {
ctx.measuretext = function(text) {
if (ctx.font) ctx.moztextstyle = ctx.font;
var width = ctx.mozmeasuretext(text);
return { width: width };
};
}
// * tup html5measuretext
if (ctx.measuretext && !ctx.html5measuretext) {
ctx.html5measuretext = ctx.measuretext;
ctx.measuretext = function(text) {
var textmetrics = ctx.html5measuretext(text);
// fake it ’til you make it
textmetrics.ascent = ctx.html5measuretext(“m”).width;
return textmetrics;
};
}
// * for other browrs, no-op away
if (!ctx.filltext) {
ctx.filltext = function() {};
}
if (!ctx.measuretext) {
ctx.measuretext = function() { return 10; };
}
return ctx;
}

注意：到opera9.5为止，opera还不支持html5规范中canvas对象的filltext以及其相关方法和属性。

hello,canvas!

在对canvas进行了一些初步了解后，开始来写我们的第一个canvas程序，闻名的helloworld的又一个分支“hello,canvas”：

<canvas id=”screen” width=”400″ height=”400″></canvas>
<script type=”text/javascript”>
(function() {
var canvas = document.getelementbyid(“screen”);
var ctx = fixcontext(canvas.getcontext(“2d”));
ctx.font = “20pt arial”;
ctx.filltext(“hello, canvas!”, 20, 20);
ctx.filltext(“www.xujiwei.com”, 20, 50);
function fixcontext(ctx) {
// * upgrade firefox 3.0.x text rendering to html 5 standard
if (!ctx.filltext && ctx.mozdrawtext) {
ctx.filltext = function(texttodraw, x, y, maxwidth) {
ctx.translate(x, y);
ctx.moztextstyle = ctx.font;
ctx.mozdrawtext(texttodraw);
ctx.translate(-x, -y);
};
}
// * tup measuretext
if (!ctx.measuretext && ctx.mozmeasuretext) {
ctx.measuretext = function(text) {
if (ctx.font) ctx.moztextstyle = ctx.font;
var width = ctx.mozmeasuretext(text);
return { width: width };
};
}
// * tup html5measuretext
if (ctx.measuretext && !ctx.html5measuretext) {
ctx.html5measuretext = ctx.measuretext;
ctx.measuretext = function(text) {
var textmetrics = ctx.html5measuretext(text);
// fake it ’til you make it
textmetrics.ascent = ctx.html5measuretext(“m”).width;
return textmetrics;
};
}
// * for other browrs, no-op away
if (!ctx.filltext) {
ctx.filltext = function() {};
}
if (!ctx.measuretext) {
ctx.measuretext = function() { return 10; };
}
return ctx;
}
})();
</script>

运行示例，canvas对象所在区域显示出“hello,world!”，这正是代码中ctx.filltext(“hello,world!”,20,20);的作用。

filltext以及相关属性

filltext方法用来在canvas中显示文字，它可以接受四个参数，其中最后一个是可选的：

voidfilltext(indomstringtext,infloatx,infloaty,[optional]infloatmaxwidth);

其中maxwidth表示显示文字时最大的宽度，可以防止文字溢出，不过我在测试中发现在firefox与chomre中指定了maxwidth时也没有任何效果。

在使用filltext方法之前，可以通过设置context的font属性来调整显示文字的字体，在上面的示例中我使用了“20ptarial”来作为显示文字的字体，你可以自己设置不生活素材同的值来看具体的效果。

二、路径

图形的基础–路径

在canvas中，所有基本图形都是以路径为基础的，也就是说，我们在调用2dcontext的lineto、rect等方法时，其实就是往已经的context路径集合中再添加一些路径点，在最后使用fill或stroke方法进行绘制时，都是依据这些路径点来进行填充或画线。

在每次开始绘制路径前，都应该使用context.beginpath()方法来告诉context对象开始绘制一个新的路径，否则接下来绘制的路径会与之前绘制的路径叠加，在填充或画边框时就会出现问题。在绘制完成路径后，可以直接使用context.clopath()方法来关闭路径，或者手动关闭路径。另外，如果在填充时路径没有关闭，那么context会自动调用clopath方法将路径关闭。

基本路径方法

1.beginpath,clopath

这两个方法在前面已经介绍过，分别用来通知context开始一个新的路径和关闭当前的路径。

在canvas中使用路径时，应该要保持一个良好的习惯，每次开始绘制路径前都要调用一次beginpath方法，否则画出来的效果难看不说，还会严重影响性能。

在下面这张图中，左边的图形在每次绘制矩形前都调用了一次beginpath来清除之前的路径并重新开始绘制新的路径，而后面的图形则就只在绘制所有图形前调用了一次beginpath来清除路径，因此，虽然这里是使用的边框色是#666，但是右边的图形颜色比左边的深一些，因为每次使用stroke绘制边框时，会把之前的路径再次绘制一遍，叠加起来颜色就比原来深一些。

<canvas id=”canvas” width=”500″ height=”500″></canvas>
<script type=”text/javascript”>
var canvas = document.getelementbyid(“canvas”);
var ctx = canvas.getcontext(“2d”);
ctx.strokestyle = “#666”;
function ubeginpath() {
for (v孙悟空的品质ar i = 0; i < 5; ++i) {
ctx.beginpath();
ctx.rect(10 + i*20, 10 + i*20, 210 – i*40, 210 – i*40);
ctx.stroke();
}
}
function notubeginpath() {
ctx.beginpath();
for (var i = 0; i < 5; ++i) {
ctx.rect(240 + i*20, 10 + i*20, 210 – i*40, 210 – i*40);
ctx.stroke();
}
}
ubeginpath();
notubeginpath();
</script>

在context中路径数较少时，如果不考虑显示效果，性能上还可以接受，但是如果context中的路径数很多时，在开始绘制新路径前不使用be著名反义词ginpath的话，因为每次绘制都要将之前的路径重新绘制一遍，这时性能会以指数下降。

因此，除非有特殊需要，每次开始绘制路径前都要调用beginpath来开始新路径。

2.移动与直线moveto,lineto,rect

<canvas id=”canvas” width=”500″ height=”500″></canvas>
<script type=̶求求你表扬我1;text/javascript”>
var canvas = document.getelementbyid(“canvas”);
var ctx = canvas.getcontext(“2d”);
ctx.beginpath();
ctx.moveto(10, 10);
ctx.lineto(110,110);
ctx.lineto(10, 110);
ctx.lineto(10, 10);
ctx.stroke();
ctx.beginpath();
ctx.rect(120, 10, 100, 100);
ctx.stroke();
</script>

voidmoveto(infloatx,infloaty);

在canvas中绘制路径，一般是不需要指定起点的，默认的起点就是上一次绘制路径的终点，因此，如果需要指定起点的话，就需要使用moveto方法来指定要移动到的位置。

voidlineto(infloatx,infloaty);

lineto方法则是绘制一条直接路径到指定的位置。在调用完lineto方法后，context内部的绘制起点会移动到直线的终点。

voidrect(infloatx,infloaty,infloatw,infloath);

rect方法用来绘制一个矩形路径，通过参数指定左上角位置以及宽和高。在调用rect后，context的绘制起点会移动到rect绘制的矩形的左上角。

rect方法与后面要介绍的arc方法与其他路径方法有一点不同，它们是使用参数指定起点的，而不是使用context内部维护的起点。

3.曲线arcto,arc,quadraticcurveto,beziercurveto

voidarcto(infloatx1,infloaty1,infloatx2,infloaty2,infloatradius);

按照whatwg文档的说明，这个方法是画一个与两条射线相切的的圆弧，两条射线其中一条为穿过context绘制起点，终点为(x1,y1)，另外一条为穿过(x2,y2)，终点为(x1,y1)，这条圆弧为最小的与这两条射线相切的圆弧。在调用完arcto方法后，将圆弧与射线(x1,y1)-(x2,y2)的切点添加到当前路径中，做为下次绘制的起点。

在测试中发现，firefox和opera目前对这个方法的支持并不好，只有chrome和safari4能绘制出正确的路径。

<canvas id=”canvas” width=”500″ height=”500″></canvas>
<script type=”text/javascript”>
var canvas = document.getelementbyid(“canvas”);
var ctx = canvas.getcontext(“2d”);
ctx.beginpath();
ctx.strokestyle = “#000”;
ctx.translate(200, 200);
ctx.moveto(10, 10);
ctx.arcto(110, 60, 10, 110, 30);
ctx.stroke();
ctx.beginpath();
ctx.strokestyle = “#999”;
ctx.moveto(10, 6);
ctx.lineto(114, 60);
ctx.lineto(10, 114);
ctx.stroke();
</script>

voidarc(infloatx,infloaty,infloatradius,infloatstartangle,infloatendangle,inbooleananticlockwi);

arc方法用来绘制一段圆弧路径，通过圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小，这个方法也不 依赖于context维护的绘制起点。而在画圆弧时的旋转方向则由最后一个参数anticlockwi来指定，如果为true就是逆时针，fal则为顺时针。

voidquadraticcurveto(infloatcpx,infloatcpy,infloatx,infloaty);

quadraticcurveto方法用来绘制二次样条曲线路径，参数中cpx与cpy指定控制点的位置，x和y指定终点的位置，起点则是由context维护的绘制起点。

voidbeziercurveto(infloatcp1x,infloatcp1y,infloatcp2x,infloatcp2y,infloatx,infloaty);

beziercurveto方法用来绘制贝塞尔曲线路径，它与quadraticcurveto相似，不过贝塞尔曲线有两个控制点，因此参数中的cp1x,cp1y,cp2x,cp2y用来指定两个控制点的位置，而x和y指定绺的位置。

<canvas id=”canvas” width=”500″ height=”500″></canvas>
<script type=”text/javascript”>
var canvas = document.getelementbyid(“canvas”);
var ctx = canvas.getcontext(“2d”);
ctx.translate(10, 10);
ctx.beginpath();
ctx.arc(50, 50, 50, 0, math.pi, true);
ctx.stroke();
// quadraticcurveto
ctx.beginpath();
ctx.strokestyle = “#000”;
ctx.moveto(110, 50);
ctx.quadraticcurveto(160, 0, 210, 50);
ctx.stroke();
ctx.beginpath();
ctx.strokestyle = “red”;
ctx.moveto(110, 50);
ctx.lineto(160, 0);
ctx.lineto(210, 50);
ctx.stroke();
// beziercurveto
ctx.beginpath();
ctx.strokestyle = “#000”;
ctx.moveto(220, 50);
ctx.beziercurveto(250, 0, 280, 10, 320, 50);
ctx.stroke();
ctx.beginpath();
ctx.strokestyle = “red”;
ctx.moveto(220, 50);
ctx.lineto(250, 0);
ctx.lineto(280, 10);
ctx.lineto(320, 50);
ctx.stroke();
</script>

4.fill,stroke,clip

fill与stroke这两个方法很好理解，分别用来填充路径与绘制路径线条。

clip方法用来给canvas设置一个剪辑区域，在调用clip方法之后的代码只对这个设定的剪辑区域有效，不会影响其他地方，这个方法在要进行局部更新时很有用。默认情况下，剪辑区域是一个左上角在(0,0)，宽和高分别等于canvas元素的宽和高的矩形。

在画这个图时，虽然两次都是使用fillrect(0,0,100,100)填充了一个100×100大小矩形，但是显示的结果却是第二次填充的只是中间的一小块，这是因为在两次填充之间使用clip方法设定了剪辑区域，这样第二次填充时只会影响到所设定的中间那一小部分区域。

<canvas id=”canvas” width=”500″ height=”500″></canvas>
<script type=”text/javascript”>
var canvas = document.getelementbyid(“canvas”);
var ctx = canvas.getcontext(“2d”);
ctx.translate(10, 10);
// fill a green rectangle
ctx.fillstyle = “green”;
ctx.fillrect(0, 0, 100, 100);
// t the clipping region
ctx.beginpath();
ctx.rect(30, 30, 40, 40);
ctx.clip();
ctx.stroke();
// fill a yellow rectangle
ctx.fillstyle = “yellow”;
ctx.fillrect(0, 0, 100, 100);
</script>

5.clearrect,fillrect,strokerect

这三个方法并不是路径方法，而是用来直接处理canvas上的内容，相当于canvas的背景，调用这三个方法也不会影响context绘图的起点。

要清除canvas上的所有内容时，可以直接调用context.clearrect(0,0,width,height)来直接清除，而不需要使用路径方法绘制一个与canvas同等大小的矩形路径再使用fill方法去清除。

结语

通过canvas的路径方法，可以使用canvas处理一些简单的矢量图形，这样在缩放时也不会失真。不过canvas的路径方法也不是很强大，至少连个椭圆的路径都没有……

参考资料
1.thecanvalement,whatwg