PS:
中文版教程参考：https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial
一、canvas标签
Canvas 对象表示一个 HTML 画布元素。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
<canvas> 标签定义图形，比如图表和其他图像；<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。(下方实例中的ctx即是)
二、canvas定义
<canvas id=“myCanvas” width="150" height="150"></canvas>
三、canvas脚本绘制
a、使用canvas 元素来显示一个矩形
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000'; // 也可使用rgb填充：ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(0,0,80,100);
</script>
b、绘制三角形形状：
<script type="text/javascript"> cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.lineTo(10,10); cxt.stroke(); cxt.closePath(); cxt.fill(); </script>
结果图：
四、使用路径path坐标点集绘制canvas
<script> var linePaths =[[0,0],[100,130],[150,150],[200,300]]; var ctx=$('canvas')[0].getContext('2d'); function drawPath(){ //画线 ctx.beginPath(); ctx.globalAlpha = "0.5"; //透明度 for (var k = 0; k < linePaths.length; k++) { if (k == 0) { ctx.moveTo(linePaths[0][0],linePaths[0][1]); } else { ctx.lineTo(linePaths[k][0],linePaths[k][1]); } } ctx.lineWidth =4; //线宽 ctx.strokeStyle = "Green"; //颜色 ctx.stroke(); }; drawPath(); </script>
结果图：
五、canvas画布清空（实质：重新绘制）
canvas这个标签就像一个img图片，可以在上面绘制很多的geometry，比如点、线、面。但所有绘制的元素是一个整体，集成在canvas上。如果想判断某点是不是在canvas绘制的要素上，可以通过重绘来完成，没有办法直接判断。
值得注意的是，isPointInPath只能判断当前路径，不能一次性对canvas中所有图形路径进行查询判断，因而需要重绘。
重新绘制canvas中个各个geometry，绘制一个判断一次，因为图形的路径绑定在canvas标签上，通过 isPointInPath（）对当前路径（currentPath）判断有效。换句话说就是，当点击事件发生后，对canvas中的内容进行重绘，每次重绘一个路径图形，就用 isPointInPath（）判断一次，如果在路径内，再执行相应的操作，比如所有相同id的路径高亮显示等。
比如目的是判断鼠标当前点point(x,y)是不是在canvas绘制的要素上，用代码解释上方的描述：
六、canvas画布的方法（截图、分析）
七、综述
a、canvas相对于svg的优势...
b、canvas对于适量绘制地图方法的可行（会在其他文章中详述使用方法）
PS： 先列出提纲，内容待续。。。