PS:

　　中文版教程参考：https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial

一、canvas标签

　　Canvas 对象表示一个 HTML 画布元素。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

　　<canvas> 标签定义图形，比如图表和其他图像；<canvas> 标签只是图形容器，必须使用脚本来绘制图形。

　　大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。(下方实例中的ctx即是)

二、canvas定义

三、canvas脚本绘制

　　a、使用canvas 元素来显示一个矩形

　　b、绘制三角形形状：

结果图：

　　

 四、使用路径path坐标点集绘制canvas 

结果图：

　　　　　　　　　　　　

五、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： 先列出提纲，内容待续。。。