热搜： Python 编程 PHP Microsoft 编程语言

HTML5 Canvas 起步(1) - 基本概念

发布时间：2023-01-14 21:52:36 来源：互联网

.

夏夜，蟋蟀劲鸣，星光灿烂，月光清澈。孩提时的晨在小山上快活的玩味着每一朵花，每一株草，亦或躺在绿油油的草地数星星。一切都是那么的美好，那么的惬意。

什么是Canvas

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

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

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

开始使用Canvas

使用Canvas很简单，与使用其他HTML元素一样，只需要在页面中添加一个<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：

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规范不一致的地方：

注意：到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); 
}; 
} 
// * 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; 
} 
})(); 
</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”来作为显示文字的字体，你可以自己设置不同的值来看具体的效果。

结束

暂时就到这里了，我会一边看规范一边写这个系列：）

参考资料

1.HTML5的Canvas，脚本语言的新舞台,hred

2.TheCanvasElement,WHATWG

3.CanvasTutorial中文,Mozilla