今天小编跟大家讲解下有关HTML5 Canvas 起步(1) - 基本概念 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5 Canvas 起步(1) - 基本概念 的相关资料，希望小伙伴们看了有所帮助。
什么是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="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); }; } // * 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; } 提示：您可以先修改部分代码再运行
注意：到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
4.CanvasTutorial英文,Mozilla
5.canvassupportinOpera,Opera
来源：爱蒂网
