canvas 拖动生成任意大小多边形并实现拖拽移动

效果如图 是不是很炫酷

Polygon是一个生成任意边数多变型的类 这很重要！

var Point = function (x, y) {
   this.x = x;
   this.y = y;
};

var Polygon=function(centerX,centerY,radius,sides,startAngle,strokeStyle,fillStyle,filled){

    this.x=centerX;
    this.y=centerY;
    this.radius=radius;
    this.sides=sides;
    this.startAngle=startAngle;
    this.strokeStyle=strokeStyle;
    this.fillStyle=fillStyle;
    this.filled=filled;
}
Polygon.prototype={
   getPoints:function(){
     var points=[];
     var angle=this.startAngle||0;
     for(var i=0;i

isPointInPath表示某个点在当前路径中就会返回true 反之返回false

var edite=false
var mousedown={}//记录鼠标按下起始点
var imageData1=null;
var mouseIn=null;//记录鼠标是否按了下去
var line_list={} //记录鼠标的终点

var Graphical=[];//存放图形引用的数组
var edit_list={}//记录在编辑模式下按的点
var map_name=null//每个生成图形的名称
var foucsIndex=null //被选中移动图形的下标


function saveImage(){  //储存此刻画布数据
      imageData1= context.getImageData(0,0,canvas.width,canvas.height)
}
function loadingImage(){ //导入画布数据
  context.putImageData(imageData1,0,0)
}



editCheckbox.onchange=function(){
  if(this.checked){
   console.log("进入编辑模式")
   edite=true
  }else{
   console.log("进入画图模式")
   edite=false
  }

}

function windowToCanvas(event){  //算出你点击在canvas画布的坐标 并返回
   var rect=canvas.getBoundingClientRect()
   return {
      x:event.clientX-rect.left,
      y:event.clientY-rect.top
   } 
}
function line_width(){
  var x_width=Math.abs(line_list.x-mousedown.x)
  var y_width=Math.abs(line_list.y-mousedown.y)
  
  return Math.sqrt(x_width*x_width+y_width*y_width) 
}



canvas.onmousedown=function(event){
    saveImage()
    var some=windowToCanvas(event)
   
    mousedown.x=some.x;
    mousedown.y=some.y
    
    mouseIn=true
    
    Graphical.forEach(function(el,index){
        el.createPath(context)
        if(context.isPointInPath(mousedown.x,mousedown.y)){
            edit_list.x=some.x;
            edit_list.y=some.y
            foucsIndex=index
         
        }

   
    })
   
}
canvas.onmousemove=function(event){

     if(mouseIn&&edite){//如果按下鼠标并拖行 如果是编辑模式
        loadingImage()
           
            
            var offset_list=windowToCanvas(event);
            var offsetX=offset_list.x-edit_list.x;
            var offsetY=offset_list.y-edit_list.y;
            context.clearRect(0,0,canvas.width,canvas.height)
            Graphical[foucsIndex].move(mousedown.x+offsetX,mousedown.y+offsetY)
            Graphical.forEach(function(el){
                el.createPath(context)
                el.fill(context)
            })
     } 


  
    if(mouseIn&&!edite){//如果按下鼠标并拖行 如果不是编辑模式
        loadingImage()
        line_list=windowToCanvas(event)
        context.beginPath()

        var r=line_width()

        map_name=new Polygon(mousedown.x,mousedown.y,r,sidesSelect.value,0,"red","red")
        map_name.fill(context)
   
        
    }
}

canvas.onmouseup=function(){


    mouseIn=false //鼠标抬起来了
    if(!edite){
        Graphical.push(map_name)
    }

}