使用canvas 实现了用鼠标拖动绘制各种图形

其中包括 矩形，圆形，箭头，画笔

使用方法

var paint = Ypaint(canvas)

绘制圆形：

paint.chooseCircle()

圆形其他参数

圆形的粗细 paint.outerParams.circle.lineWidth
圆形的颜色 paint.outerParams.circle.color

绘制矩形：

paint.chooseRect()

矩形其他参数

矩形的粗细 paint.outerParams.rect.lineWidth
矩形的圆角 paint.outerParams.rect.radius
矩形的颜色 paint.outerParams.rect.color

绘制箭头：

paint.chooseArrow()

箭头其他参数

箭头的粗细 paint.outerParams.arrow.range
箭头的大小 paint.outerParams.arrow.color

画笔工具：

paint.chooseCircle()

画笔工具其他参数

画笔的粗细 paint.outerParams.line.lineWidth
画笔的颜色 paint.outerParams.line.color

demo实例截图：

 

后续有时间会添加的功能：撤销、回撤、插入图片、图片在canvas内的拖动等等 有需求的可以提一提

在这里因为代码比较长，只提供压缩版本的代码，需要完整项目及demo的朋友 可以去我的github上下载 

github地址：https://github.com/lvangorysky/Ypaint 

 压缩版本代码：

!function(){function t(){this.init=function(t){this.outerParams={rect:{},circle:{},line:{},arrow:{}},this.isLine=!1,this.isArrow=!1,this.isRect=!1,this.isCircle=!1,this.lock=!1,this.canvas=t,this.ctx=this.canvas.getContext("2d"),this.w=this.canvas.width,this.h=this.canvas.height,this.touch="createTouch"in document,this.StartEvent=this.touch?"touchstart":"mousedown",this.MoveEvent=this.touch?"touchmove":"mousemove",this.EndEvent=this.touch?"touchend":"mouseup",this.clickDrag=[],this.lineX=[],this.lineY=[],this.beginPoint={},this.stopPoint={},this.storage={},this.rect={},this.polygonVertex=[],this.status={lineArr:[],arrowArr:[],circleArr:[],rectArr:[]},this.bind()},this.chooseRect=function(){this.isLine=!1,this.isArrow=!1,this.isRect=!0,this.isCircle=!1},this.chooseCircle=function(){this.isLine=!1,this.isArrow=!1,this.isRect=!1,this.isCircle=!0},this.chooseLine=function(){this.isLine=!0,this.isArrow=!1,this.isRect=!1,this.isCircle=!1},this.chooseArrow=function(){this.isLine=!1,this.isArrow=!0,this.isRect=!1,this.isCircle=!1},this.bind=function(){var t=this;this.canvas["on"+t.StartEvent]=function(e){var i=t.touch?e.touches[0]:e;t.lock=!0;var s=i.offsetX,r=i.offsetY;t.isRect?(t.rect.x=s,t.rect.y=r):t.isCircle?(t.storage.x=s,t.storage.y=r):t.isLine?(t.movePoint(s,r),t.drawPoint(t.lineX,t.lineY,t.clickDrag,t.outerParams.line.lineWidth,t.outerParams.line.color)):t.isArrow&&(t.beginPoint.x=s,t.beginPoint.y=r)},this.canvas["on"+t.MoveEvent]=function(e){if(t.lock)if(t.isRect)t.rect.width=Math.abs(t.rect.x-e.offsetX),t.rect.height=Math.abs(t.rect.y-e.offsetY),t.rect.x>e.offsetX?t.rect.realX=e.offsetX:t.rect.realX=t.rect.x,t.rect.y>e.offsetY?t.rect.realY=e.offsetY:t.rect.realY=t.rect.y,t.clear(),t.redrawAll(),t.drawRect(t.rect.realX,t.rect.realY,t.rect.width,t.rect.height,t.outerParams.rect.radius,t.outerParams.rect.color,t.outerParams.rect.lineWidth);else if(t.isCircle){if(t.storage.x>e.offsetX)i=t.storage.x-Math.abs(t.storage.x-e.offsetX)/2;else var i=Math.abs(t.storage.x-e.offsetX)/2+t.storage.x;if(t.storage.y>e.offsetY)s=t.storage.y-Math.abs(t.storage.y-e.offsetY)/2;else var s=Math.abs(t.storage.y-e.offsetY)/2+t.storage.y;var r=Math.abs(t.sto