熟悉HTML5的canvas绘图元素
针对于HTML5新增的canvas元素，本人觉得挺好用的，想针对于这个单独做一个介绍和使用说明
下面先给个canvas的例子：
<html> <head></head> <body> <canvas class="my_canvas" id="mycanvas"> 对不起，您的浏览器不支持HTML5，请升级浏览器至IE9、firefox或者谷歌浏览器！ </canvas> <body> </html>
当实例化canvas后便可对canvas进行操作
首先我们要获取一个canvas的画板
me.canvas = document.getElementById("mycanvas");
注：我试过通过new来实例化好像会报错，具体我再查查资料，我会陆续更新这个文章
我们得到canvas面板后我们还需要设置面板的宽度和高度，和背景
me.canvas.width = 100; //面板宽度100像素 me.canvas.height = 200; //面板高度200像素 me.canvas.style.background = "" //设置背景
接下来我们就要对面板进行绘制，这时要获取面板的环境context
me.myContext = me.canvas.getContext("2d");
为什么是2d，因为在未来的HTML5有可能会有3d的引擎，目前只有一个“2d”的选项
此时的me.myContext是CanvasRenderingContext2D对象
画矩形，不填充
me.myContext.strokeStyle = "#921aff"; //用context.fillStyle来设置画笔的颜色 me.myContext.lineWidth = 2; //线条宽度，如果只为了描绘框架，可以设为0 me.myContext.strokeRect(10,20,30,40); //在相对画布x=10,y=20的位置画一个width=30,height=40的矩形
画矩形，矩形填充
me.myContext.fillStyle = "#921aff"; //用context.fillStyle来设置画笔的颜色 me.myContext.fillRect(10,20,30,40); //在相对画布x=10,y=20的位置画一个width=30,height=40的矩形
清除图像
me.myContext.clearRect(10,20,30,40); //清除相对画布x=10,y=20,w=30,h=40的矩形区域
注：绘制的时候是一层层的覆盖，所以清除的时候只能一起清除到原始点
绘制图片
var img = new Image(); //或者获取<img>标签对象
img.src = "img/bg.jpg"; //设置图片地址
img.onload = function() { //因为图片引入是异步的，所以需要在图片引入完才可把图片绘制到面板
me.myContext.drawImage(img,10,20,30,40); //绘制图片
}
接下来我来介绍一下，如何绘制更复杂的图形，这部分和其他语言有些不同，
它的原理是先通过代码描出隐藏的，然后再给这个隐藏的线条上色并让其显现出来，
下面我会陆续介绍每个描绘方法，然后再画一个复杂的图形例子。
绘制一条直线，划线：stroke(),strokeStyle
me.myContext.beginPath(); //设定描绘开始标志，这个必须要有，否则在描线或填充中会把之前描绘的一起画上 me.myContext.moveTo(10,20); //设定起始点，x=10,y=20 me.myContext.lineTo(30,40); //设定终点，x=30,y=40 me.myContext.closePath(); //关闭锚点，设定描绘结束标志，如果和描线或填充一起用则可以不写 me.myContext.strokeStyle = "#921aff"; //上色 me.myContext.stroke(); //描线，此函数内部包含了closePath()
上面有几点要注意：
1、beginPath()在每次画新图的时候一定要加上，否则它将不知道，在描线或填充的时候从哪一次开始，所以它会自动寻找设定beginPath()最近的地方开始画线。
2、closePath()并不是实际意义上的关闭锚点，当每次描线或填充的时候，仍然只是寻找beginPath()
3、clearRect()这个橡皮擦函数，只能擦掉已经描线或填充的像素图像，不能清除预先描绘出的矢量线条。
4、可以用下面的方法，来清掉预先描绘出的矢量线条：
me.myContext.beginPath();
me.myContext.closePath();
把beginPath()和closePath();连写在一起，中间什么都不加，自然就清掉了隐藏的矢量线条了。
绘制一个填充的矩形，填充：fill(),fullStyle
me.myContext.beginPath(); //设定描绘开始标志，这个必须要有，否则在描线或填充中会把之前描绘的一起画上 me.myContext.rect(10,20,30,40); //相对画布画矩形的矢量线，x=10,y=20,w=30,d=40 me.myContext.closePath(); //关闭锚点，设定描绘结束标志，如果和描线或填充一起用则可以不写 me.myContext.fillStyle = "#921aff"; //上色 me.myContext.fill(); //填充，此函数内部包含了closePath()
和上面一样，只是会用到fill()和fillStyle，
注意：要填充在这之前描绘出的矢量图必须是闭合图形，否则该函数调用的时候就会报错
还有以下几个矢量绘制方法：
arc() 用一个中心点和半径，为一个画布的当前子路径添加一条弧线。
arcTo() 使用目标点和一个半径，为当前的子路径添加一条弧线。
bezierCurveTo() 为当前的子路径添加一个三次贝塞尔曲线。
quadraticCurveTo() 为当前路径添加一条贝塞尔曲线。
clip() 使用当前路径作为连续绘制操作的剪切区域。
有时间我会陆续介绍上面的具体用法，至于“贝赛尔曲线”，计算起来有些麻烦
其他的参照下面这个链接，有时间我会继续更新canvas的每个用法
HTML DOM CanvasRenderingContext2D 对象
毕竟HTML5的canvas比较基础，如果写一个小插件，通过这种原生态的元素还是比较方便的，
下面我推荐一个HTML5的游戏框架——phaser，这是个简单酷炫的游戏框架，有时间我会针对于这个框架写一个简单的教程，
感兴趣的小伙伴不妨看看吧 http://www.phaserengine.com/
