canvas画不规则多边形_Canvas绘制不规则图形，实现可拖动，编辑--V1.0第一篇

目前的工作在做在线的标注工具，接触canvas一年了，各种绘制，基本上图像的交互canvas都可以完成，也写了几篇关于canvas的文章，遇到的问题也写博客上了，对于canvas有问题的朋友可以去看看。一直想写一个关于canvas系列的东西，也没时间。正好最近再捣鼓canvas，有时间就写一点，一个功能一个功能的写，争取写一个系列。

以前都是绘制矩形，今天写一个新鲜的，绘制多边形可拖动编辑的多边形。见下图(截取自工程的一部分):

(太大的GIF图传不上来，只能截取一小部分，找个时间把完整的功能录一个视频放在网盘上)。

鼠标点击绘制点，并且自动绘制曲线，(当曲线闭合的时候，弹出名称边界框--不重要)，绘制完毕后，点击点可以改变形状，点击曲线内部可以拖动位置。

这篇文章就先写绘制不规则图像与拖动点吧，移动图像值得另起写一篇文章。

正文

写了这么多的canvas代码，我的经验就是一定要去写，一边写边看效果，做的过程中会有新的想法。对于canvas各种绘制的效果，还是得去动手去修改才能出效果。

写之前整理下思路：

1.鼠标点击绘制点-->绘制圆的方法，鼠标点为中心点。

2.每点击一次，绘制线段。--Lineto方法。

3.判断是否闭合。

4.判断是否点击了绘制过的点上--拖动改变形状。

5.重绘。

画布上每一次的更改都是要重新绘制画布的，所以要把绘制的点保存起来。这个思路和画矩形的