HTML5 <canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas>标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
创建一个画布（Canvas）
一个画布在网页中是一个矩形框，通过 <canvas>元素来绘制.
注意: 默认情况下 <canvas>元素没有边框和内容。
<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
提示:你可以在HTML页面中使用多个 <canvas>元素.
使用 style 属性来添加边框:
实例
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000">
</canvas>
使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
实例
var c=document.getElementById("myCanvas")
var ctx=c.getContext("2d")
ctx.fillStyle="#FF0000"
ctx.fillRect(0,0,150,75)
例解析:
首先，找到 <canvas>元素:
var c=document.getElementById("myCanvas")
然后，创建 context 对象：
var ctx=c.getContext("2d")
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000"
ctx.fillRect(0,0,150,75)
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
Canvas 坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
坐标实例
如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。
X
Y
Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 "ink" 的方法，就像stroke().
实例
定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:
JavaScript:
var c=document.getElementById("myCanvas")
var ctx=c.getContext("2d")
ctx.moveTo(0,0)
ctx.lineTo(200,100)
ctx.stroke()
尝试一下 »
在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().
实例
使用 arc() 方法 绘制一个圆:
JavaScript:
var c=document.getElementById("myCanvas")
var ctx=c.getContext("2d")
ctx.beginPath()
ctx.arc(95,50,40,0,2*Math.PI)
ctx.stroke()
DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个 元素，可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体，图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。
Canvas的限制
在Canvas里，所有图形都绘制在帧上，绘制方法不会将绘制好的图形元素作为一个返回值输出，js也无法获取到已经绘制好的图形元素。比如：
代码如下:
cvs = document.getElementById('mycanvas')
ctx = canvas.getContext('2d')
theRect = ctx.rect(10, 10, 100, 100)
ctx.stroke()
console.log(theRect)//undefined
这段代码在canvas标签里绘制了一个矩形，首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具，还可以看到canvas标签内部没有增加任何内容，而在js里获取到的canvas元素以及当前的上下文，也都没有任何表示新增图形的内容。
所以，前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形，实际点击的是整个Canvas元素。
给Canvas元素绑定事件
由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的`哪一个图形上，就需要增加代码来进行处理。基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形，该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。思路其实比较简单，但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率，有些地方还需要重新判断事件类型，设置要重新定义一个Canvas内部的捕获和冒泡机制。
首先要做的，是给Canvas元素绑定事件，比如Canvas内部某个图形要绑定点击事件，就需要通过Canvas元素代理该事件：
代码如下:
cvs = document.getElementById('mycanvas')
cvs.addEventListener('click', function(e){
//...
}, false)
接下来需要判断事件对象发生的位置，事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持，Safari也打算移除，所以要做一些兼容写法：
代码如下:
function getEventPosition(ev){
var x, y
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX
y = ev.layerY
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX
y = ev.offsetY
}
return {x: x, y: y}
}
//注：使用上面这个函数，需要给Canvas元素的position设为absolute。
现在有了事件对象的坐标位置，下面就要判断Canvas里的图形，有哪些覆盖了这个坐标。
isPointInPath方法
Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标，比如：
代码如下:
cvs = document.getElementById('mycanvas')
ctx = canvas.getContext('2d')
ctx.rect(10, 10, 100, 100)
ctx.stroke()
ctx.isPointInPath(50, 50)//true
ctx.isPointInPath(5, 5)//false
接下来增加一个事件判断，就可以判断一个点击事件是否发生在矩形上：
代码如下:
cvs.addEventListener('click', function(e){
p = getEventPosition(e)
if(ctx.isPointInPath(p.x, p.y)){
//点击了矩形
}
}, false)
以上就是处理Canvas事件的基本方法，但是上面的代码还有局限，由于isPointInPath方法仅判断当前上下文环境中的路径，所以当Canvas里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件，比如：
代码如下:
