HTML5 canvas学习笔记（一）
canvas是HTML5中新增的标签，下面是各浏览器的支持程度：
canvas的默认大小为：宽-300px，高-150px（注意：画布的大小作为canvas标签的行内样式设置，而且是没有“px”单位的哦， 如果你在canvas的css样式中给它设置大小，它只会当做放大比例来处理！），下面这段代码在支持canvas的浏览器中会显示一块400px400px的白色（默认颜色）画布，在不支持canvas的浏览器中只是显示canvas中的文字而已哦。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas</title> <style type="text/css"> body{ background:gray;} #c1{ background:white;} </style> </head> <body> <!-- 默认宽300， 高150 --> <canvas id="c1" width="400" height="400"> 你的浏览器不支持canvas.. </canvas> </body> </html>
下面我们在刚刚创建的画布中画一个带有边框的矩形：
var oC = document.getElementById("c1"); var oGC = oC.getContext('2d'); //创建一个绘图环境 oGC.fillStyle = 'red'; //设置填充样式 oGC.strokeStyle = 'blue'; //设置表框样式 oGC.lineWidth = 10; //设置边框的大小 oGC.lineJoin = 'round'; //端点的样式-圆角 //oGC.lineJoin = 'bevel'; //斜线 oGC.fillRect(50, 50, 100, 100); //在50,50处画一个矩形，并填充它 oGC.strokeRect(50.5, 50.5, 100, 100); //在来画个边框
效果图见：http://runjs.cn/code/vvdbykgz
不知道大家注意到没有，上面代码中最后一行oGC.strokeRect(50.5, 50.5, 100, 100);为什么起始坐标还要加上个0.5像素?这是因为如果边框长度是1像素的话，他从50,50开始两边各占0.5，这个0.5像素给浏览器是不好显示的，所以浏览器只好各边给你一个像素，结果最后就是2个像素的宽度了，这就是为什么要加那0.5个像素了。
我们还可以绘制两个或多个图形， 通过binginPath()和closePath()来控制路径：
var oC = document.getElementById("c1"); var oGC = oC.getContext('2d'); oGC.beginPath(); oGC.moveTo(100, 100); oGC.lineTo(200, 200); oGC.lineTo(300, 200); oGC.closePath(); oGC.stroke(); oGC.beginPath(); oGC.moveTo(100, 200); oGC.lineTo(200, 300); oGC.lineTo(300, 300); oGC.closePath(); oGC.fill();
效果图见：http://runjs.cn/code/lmrv8iuo
通过clearRect()可以清除画布中某个区域的数据，我们再结合定时器可以创建一个方块移动的效果：
var oC = document.getElementById("c1"); var oGC = oC.getContext('2d'); var num = 0; oGC.fillRect(0, 0, 100, 100); setInterval(function(){ num++; oGC.clearRect(0, 0, oC.width, oC.height); oGC.fillRect(num, num, 100, 100); }, 30);
效果图见：http://runjs.cn/code/prkby9xp