html5 canvas基础教程,html canvas开发详解
什么是Canvas
Canvas是一个新的HTML元素，在HTML5中定义。这个元素通常可以用来通过JavaScript在HTML页面中绘制图形、合成图像等等，也可以用来做一些动画。当然，HTML5规范还在草案阶段，正式发布可能要等到2010年。然而，许多浏览器已经支持一些HTML5规范。目前支持canvas元素的浏览器有Firefox3、Safari4、Chrome2.0等。因此，当运行本页上的示例时，请确保您使用的是上述浏览器之一。
虽然Mozilla里面有很多关于Canvas的教程，但是我还是决定记录下我的学习过程。如果你觉得我写的不够清楚，那么你可以在参考资料中找到Mozilla网站上的Canvas教程的链接。
此外，你可以在这里找到一些有趣的画布示例。
开始使用Canvas
使用画布非常简单。就像使用其他HTML元素一样，您只需要向页面添加一个canvas标记：
复制代码如下：
画布id= screen width= 400 height= 400 /canvas
当然，这只是简单地创建了一个画布对象，没有任何操作。此时canvas元素看起来和div元素没什么区别，页面上什么都看不到：)
另外，canvas元素的大小可以通过width和height属性来指定，有点类似于img元素。Canvas的核心：Context如前所述，可以通过JavaScript操作Canvas对象来绘制图形、合成图像等。这些操作不是由Canvas对象本身执行的，而是通过Canvas对象的一个方法getContext获取Canvas操作上下文。也就是说，在后期使用Canvas对象的过程中，我们都是在处理Canvas对象的上下文，Canvas对象本身可以用来获取Canvas对象的大小等信息。
获取canvas对象的上下文很简单，直接调用Canvas元素的getContext方法即可，调用时需要传递一个Context类型参数。当前可用且唯一可用的类型值是2D:canvas ID= screen width= 400 height= 400 /canvas script type= text/JavaScript var canvas=document . getelementbyid( screen )；var CTX=canvas . get context( 2d )；/脚本提示：可以在运行Firefox3.0.x的尴尬之前修改一些代码。
虽然Firefox3.0.x支持Canvas元素，但是并没有完全按照规范实现。规范中的fillText和measureText两个方法在Firefox3.0.x中被几个Firefox特有的方法取代，所以在Firefox 3.0.x中使用canvas时，需要先修复这些方法在不同浏览器中的差异。
以下代码摘自MozillaBespin项目，修复了Firefox3.0.x中Canvas的Context对象与HTML5规范的不一致：函数修复Context(CTX){//* upgrade Firefox 3.0 . x文本渲染到HTML5标准if(！CTX . fill text CTX . mozdrawtext){ CTX . fill text=function(textToDraw，x，y，maxWidth) { ctx.translate(x，y)；CTX . moztextstyle=CTX . font；CTX . mozdrawtext(textToDraw)；ctx.translate(-x，-y)；};} //*设置measureText if(！CTX . measure text CTX . moz measure text){ CTX . measure text=function(text){ if(CTX . font)CTX . moz text style=CTX . font；var width=CTX . mozmeasuretext(text)；返回{ width:width }；};}//* Setup html 5 measure text if(CTX . measure text！CTX . html 5 measure text){ CTX . html 5 measure text=CTX . measure text；CTX . measure text=function(text){ var text metrics=CTX . html 5 measure text(text)；//假装它，直到它变成text metrics . ascent=CTX . html 5 measure text( m )。宽度；返回文本度量；};}///*对于其他浏览器，no-op away if(！CTX . fill text){ CTX . fill text=function(){ }；}如果(！CTX . measure text){ CTX . measure text=function(){ return 10；};}返回ctx}提示：运行前可以修改一些代码。注意：Opera9.5之前，Opera不支持HTML5规范中Canvas对象的fillText及其相关方法和属性。
Hello,Canvas!
在对帆布进行了一些初步了解后，开始来写我们的第一个帆布程序，闻名的编译的又一个分支“你好，Canvas”:Canvas id= screen width= 400 height= 400 /Canvas script type= text/JavaScript (function(){ var Canvas=document。getelementbyid(“screen”)；var CTX=固定上下文(画布。获取上下文(“2d”)；CTX . font= 20pt arial CTX . fill text(你好，画布！, 20, 20);ctx.fillText(www.xujiwei.com ，20，50)；函数fixContext(ctx) { //*将火狐3.0.x文本渲染升级到HTML 5标准如果(！CTX。填写文本CTX。{ CTX。fill text=function(textToDraw，x，y，maxWidth) { ctx.translate(x，y)；CTX。CTX。字体；CTX。mozdrawtext(textToDraw)；ctx.translate(-x，-y)；};} //*设置measureText if(！CTX。测量文本CTX。墨子测文){ CTX。measure text=function(text){ if(CTX。CTX。moz文本样式=CTX。字体；var宽度=CTX。mozmeasuretext(文本)；返回{ width:width }；};}//*设置html 5度量文本if(CTX。测量文本！CTX。html 5测量文本){ CTX。html 5测量文本=CTX。测量文本；CTX。度量文本=函数(文本){ var文本度量=CTX。html 5度量文本(text)；//假装它，直到它变成文本度量。上升=CTX。html 5度量文本(“m”).宽度；返回文本度量；};}///*对于其他浏览器，no-op away if(！CTX。填充文本){ CTX。fill text=function(){ }；}如果(!CTX。测量文本){ CTX。度量text=function(){ return 10；};}返回CTX } })()；/脚本提示：您可以先修改部分代码再运行运行示例，画布对象所在区域显示出"你好，世界!",这正是代码中ctx.fillText(你好，世界!,20,20);的作用。
fillText以及相关属性
填充文本方法用来在帆布中显示文字，它可以接受四个参数，其中最后一个是可选的：
voidfillText(inDOMStringtext，infloatx，infloaty，[可选]inhoatmaxwidth)；
其中最大宽度表示显示文字时最大的宽度，可以防止文字溢出，不过我在测试中发现在火狐浏览器与乔姆雷中指定了最大宽度时也没有任何效果。
在使用填充文本方法之前，可以通过设置语境的字体属性来调整显示文字的字体，在上面的示例中我使用了" 20页"来作为显示文字的字体，你可以自己设置不同的值来看具体的效果。
结束
暂时就到这里了，我会一边看规范一边写这个系列：)
参考资料
1.HTML5的画布，脚本语言的新舞台，hred
2.坎瓦斯元素，WHATWG
3.CanvasTutorial中文，Mozilla
4.CanvasTutorial英文，Mozilla
5 .歌剧
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。