画图板--规划

1.概述

现在一些h5的canvas很火呀，我们项目要用一个画图板，所以打算用canvas来做，主要的功能有样式选择器(字体大小，颜色,线条粗细，颜色)，绘制三角形，矩形，椭圆，三角，曲线,撤销，橡皮擦放大缩小。

2.规划

主要通过监听画图板的mousedown,mousemove,mouseup。

绘制曲线

鼠标点击画板表示开始出发canvas的moveto表示开始，鼠标移动时,利用canvas的lineto不断连线，这样就形成一个曲线，当mouseup触发时，曲线绘制完成(我称这个状态叫定形)，

绘制直线

鼠标点击画板表示开始出发canvas的moveto表示开始，从起点到当前点连线，这时候每次画都需要把之前的清除掉，我称这个叫预览功能，当mouseup触发时，曲线绘制完成，

预览功能

预览需要两个canvas画图板来实现,两个板完全一样，上面的板背景设置成完全透明，用来显示下面画板的图形，上面那层每次画都清除整个画图板,当定形时，绘制当前操作到下面那层画板。

绘制三角形

三角形其实是三个点的连线，前两个点我们用绘制直线的方法来实现，第三个点从直线定形之后，鼠标移动，不断和之前的之前首尾两点连线。不断预览。直到mouseup，定形

绘制矩形

矩形说白了，是两个点连线，和直线相似我们使用canvas的strokeRect()方法，不断计算起始点和当前点的x轴差width,y轴差height,因为我们有可能在起始点的任意方向绘制，因此绘制的起始点和我们点击canvas的起始点是不一样的，假设点击canvas的点为(x1,y1),当前点是(x2,y2),那么绘制矩形的左上角的点为(Math.min(x1,x2), Math.min(y1,y2)），预览，定形

绘制椭圆