canvas JavaScript API学习90_H5之家 - 中国HTML5教程资源分享第一站

canvasJavaScriptAPI学习（一）；Postedon2010年04月13日by丸子；<canvas>是html5规范中的；对于canvas的历史我就不多赘述，Google；1<!--[ifIE]><sc；首先，我们来看一段最简单的代码；?ViewCodeHTML；10；11；12；13；14；15；16；17；18

canvas JavaScript API学习（一）

Posted on 2010年04月13日 by 丸子

<canvas>是html5规范中的标签，通过JavaScript脚本可以在canvas中绘画出图形或实现动画效果。更多canvas的资料请查看：The canvas element — HTML5 (including next generation additions still in development) 写在前面

对于canvas的历史我就不多赘述，Google比我知道的多！我们直接从实例开始我们的旅程。本文虽然是讲canvas，但更多的是JavaScript内容，因此要继续下去，你需要一点JavaScript基础。现在<canvas>并没有被所有浏览器支持，你需要一些支持html5的浏览器来测试文中的例子（如：Firefox1.5+，较新版本的Safari或Chrome以及opera9+等）。本人使用的浏览器是Firefox3.6.3并在此环境下做所有测试。如果你想让ie也支持可以使用explorercanvas，用vml来描述canvas的内容，使用起来很简单，只要加入下面代码即可。 ?View Code HTML

1  Hello,canvas！

首先，我们来看一段最简单的代码

?View Code HTML

18 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas demo</title> <style type="text/css"> canvas { } </style> </head> <body> <h1>this is a canvas api test page!</h1> <canvas id="canvas" width="300" height="300">this browser does not support canvas...</canvas> </body>

</html> border:1px #000 solid; /*width:300px; height:300px;*/

当你在支持html5 canvas的浏览器下查看页面的时候，你会看到一个大小为300px*300px（BTW：canvas默认大小为：300px*150px），边框为1px宽的方框，而在ie下，你只能看到一句话：this browser does not support canvas…。正如你所看到的那样，canvas跟其他标签一样，可以通过css来定义样式，也可以用它本身支持的html属性来定义宽和高。但是这里有一点需要注意：在css中为canvas定义宽高，实际是将canvas进行拉伸，因此，如果在这样的情况下在canvas中绘图，你得到的图形可能就是变形的。所以建议直接在canvas中用html属性来定义canvas的大小。

canvas with JavaScript

接下来，我们来演示如何通过JavaScript在canvas里绘图。查看demo

?View Code HTML

32 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas javascript api demo</title> <style type="text/css"> canvas { } </style> </head> <body> <h1>this is a canvas api test page!</h1> <canvas id="canvas" width="300" height="300">this browser does not support canvas...</canvas> <script type="text/javascript"> var $=function(id){ } window.onload=function(){ } </script> </body>

</html> var ctx=$('canvas').getContext('2d'); ctx.fillStyle='rgba(255,0,0,1)'; ctx.fillRect (10, 10, 50, 50); ctx.fillStyle = "rgba(0, 255, 0, 0.5)"; ctx.fillRect (30, 30, 50, 50); ctx.fillStyle = "rgba(0, 0, 255, 0.5)"; ctx.fillRect (50, 50, 50, 50); return document.getElementById(id); border:1px #000 solid; /*width:300px; height:300px;*/

canvas提供了一个接口来实现一种或多种的渲染环境（rendering context），但目前还只实现了2D渲染环境。通过这个接口，我们就可以在canvas中绘图了。那么在绘图前，我们先取得这个环境：

?View Code JAVASCRIPT

1 var ctx=$('canvas').getContext('2d');//通过canvas的id取得canvas并调用getContext方法得到2d渲染环境，目前只有代码中getContext(’2d’)方法返回CanvasRenderingContext2D对象，该对象拥有的方法和属性可以参考文章一开始提到的url。这里我们简单介绍fillStyle属性跟fillRect方法，更多用法我会在后面的学习中演示。 fillStyle是为当前环境配置填充颜色，它支持rgb值或rgba值或十六进制值（如：#F00），也支持hsl或hsla值，默认为黑色；

fillRect定义了填充区域为矩形，并由四个参数来设置填充的位置及大小，第一二两个参数为相对canvas左上角的坐标值，三四两个参数为所填充的矩形区域的宽和高，填充颜色使用fillStyle值。与之相反的方法就是clearRect，用来擦除指定区域内容，参数及用法与fillRect类似。

最后，我们来用所学的知识写一个简单的动画实例：查看demo

canvas JavaScript API学习（二）

Posted on 2010年04月17日 by 丸子