一、基本概念
什么是Canvas
?是一个新的?HTML?元素，这个元素在?HTML5 ?中被定义。这个元素通常可以被用来在?HTML?页面中通过?JavaScript?进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前?HTML5?规范还在草稿阶段，正式发布也许要等到2010年，不过现在已经有不少浏览器已经支持了部分?HTML5?规范。目前支持?canvas?元素的浏览器有?Firefox?3+、Safari?4、Chrome?2.0+?等，因此，在运行本页中的例子时，请确保你使用的是上述浏览器之一。
尽管在?Mozilla ?已经有不少关于?Canvas?的教程，我还是决定把自己的学习过程记录下来。如果觉得我写的不够明白，那么你可以在参考资料中找到?Mozilla?网站上?Canvas?教程的链接。
另外，可以在这里 找到一些有趣的?Canvas?示例
开始使用?Canvas
使用?Canvas?很简单，与使用其他?HTML?元素一样，只需要在页面中添加一个标签即可：
代码如下:
当然，这样只是简单的创建了一个?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：
var canvas = document.getElementById("screen");
var ctx = canvas.getContext("2d");
Firefox?3.0.x?的尴尬
Firefox?3.0.x?虽然支持了?canvas?元素，但是并没有完全按照规范来实现，规范中的?fillText、 measureText?两个方法在?Firefox?3.0.x?中被几个?Firefox?特有的方法代替，因此在?Firefox?3.0.x?中使用?Canvas?时需要先?fix?这个几个方法在不同浏览器中的差别。
下面这代码取自?Mozilla?Bespin ?项目，它修正了?Firefox?3.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);
};
}
// * Setup 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 };
};
}
// * Setup 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 browsers, no-op away
if (!ctx.fillText) {
ctx.fillText = function() {};
}
if (!ctx.measureText) {
ctx.measureText = function() { return 10; };
}
return ctx;
}
注意：到?Opera?9.5?为止，Opera?还不支持?HTML5?规范中?Canvas?对象的?fillText?以及其相关方法和属性。
Hello,?Canvas!
在对?Canvas?进行了一些初步了解后，开始来写我们的第一个?Canvas?程序，闻名的?HelloWorld?的又一个分支“Hello,?Canvas”：
(function() {
var canvas = document.getElementById("screen");
var ctx = fixContext(canvas.getContext("2d"));
ctx.font = "20pt Arial";
ctx.fillText("Hello, Canvas!", 20, 20);
ctx.fillText("", 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);
};
}
// * Setup 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 };
};
}
// * Setup 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 browsers, no-op away
if (!ctx.fillText) {
ctx.fillText = function() {};
}
if (!ctx.measureText) {
ctx.measureText = function() { return 10; };
}
return ctx;
}
})();
运行示例，Canvas?对象所在区域显示出“Hello,?World!”，这正是代码中?ctx.fillText("Hello,?World!",?20,?20);?的作用。
fillText?以及相关属性
fillText?方法用来在?Canvas?中显示文字，它可以接受四个参数，其中最后一个是可选的：
void?fillText(in?DOMString?text,?in?float?x,?in?float?y,?[Optional]?in?float?maxWidth);
其中?maxWidth?表示显示文字时最大的宽度，可以防止文字溢出，不过我在测试中发现在?Firefox?与?Chomre?中指定了?maxWidth?时也没有任何效果。
在使用?fillText?方法之前，可以通过设置?Context?的?font?属性来调整显示文字的字体，在上面的示例中我使用了“20pt?Arial”来作为显示文字的字体，你可以自己设置不同的值来看具体的效果。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery