canvas橡皮筋式线段绘制

这里的要注意
getImageData //getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

putImageData
//putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。

context.save() 设置绘图环境存档
context.restore() 读取绘图环境存档

var canvas=document.getElementById("canvas"),
   context=canvas.getContext("2d"),
   eraseAllButton=document.getElementById("eraseAllButton"),
   strokeStyleSelect=document.getElementById("strokeStyleSelect"),
   guidewireCheckbox=document.getElementById("guidewireCheckbox"),
   drawingSurfaceImageData,
   mousedown={},
   rubberbandRect={},
   dragging=false,
   guidewires=guidewireCheckbox.checked;


    function windowToCanvas(x,y){
        var bbox=canvas.getBoundingClientRect()//getBoundingClientRect 返回元素的6个值 left top right bottom width height
     
        return {
            x:x-bbox.left*(canvas.width/bbox.width),
            y:y-bbox.top*(canvas.height/bbox.height)
        }
    }

    function saveDrawingSurface(){
        drawingSurfaceImageData=context.getImageData(0,0,canvas.width,canvas.height) 
     //getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
    }
    
    function restoreDrawingSurface(){
        context.putImageData(drawingSurfaceImageData,0,0)
        //putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。
    }

   function updateRubberbandRectangle(loc){
       rubberbandRect.width=Math.abs(loc.x-mousedown.x)  //用绝对值求线段的长度
       rubberbandRect.height=Math.abs(loc.y-mousedown.y)  //用绝对值求线段的高度

       if(loc.x>mousedown.x){rubberbandRect.left=mousedown.x}else{
           rubberbandRect.left=loc.x
       }
       if(loc.y>mousedown.y){rubberbandRect.top=mousedown.y}else{
           rubberbandRect.top=loc.y
       }
   }
   function drawRubberbandShape(loc){

       context.beginPath()
       context.moveTo(mousedown.x,mousedown.y)
       context.lineTo(loc.x,loc.y)
       context.stroke()
   }
   function updataRubberband(loc){  //loc是鼠标点在canvas上的坐标集合对象
      // updateRubberbandRectangle(loc)
       drawRubberbandShape(loc)
   }
//这三个函数式辅助线函数
   function drawHorizontalLine(y){
       context.beginPath()
       context.moveTo(0,y+0.5)
       context.lineTo(context.canvas.width,y+0.5)
       context.stroke()
   }
   function drawVerticalLine(x){
       context.beginPath()
       context.moveTo(x+0.5,0)
       context.lineTo(x+0.5,context.canvas.height)
       context.stroke()

   }
   function drawGuidewires(x,y){
       context.save()
       context.strokeStyle="rgba(0,0,230,0.4)"
       context.lineWidth=0.5;
       drawVerticalLine(x)
       drawHorizontalLine(y)
       context.restore()
   }
//这三个函数式辅助线函数
   canvas.onmousedown=function(e){  //只执行一次
     var loc=windowToCanvas(e.clientX,e.clientY); //获取鼠标点在canvas的点坐标
     e.preventDefault();
     saveDrawingSurface()                         //复制canvas画布的像素
     mousedown.x=loc.x;                          //鼠标点击的x轴坐标  这里mousedown记录的是初始位置
     mousedown.y=loc.y;                          //鼠标点击的y轴坐标   这里mousedown记录的是初始位置
     dragging=true;
 }
canvas.onmousemove=function(e){
       var loc;
       if(dragging){
           e.preventDefault()
           loc=windowToCanvas(e.clientX,e.clientY);
           restoreDrawingSurface()
           updataRubberband(loc)  //loc是鼠标点在canvas上的坐标集合对象
           if(guidewires){        //辅助线
               drawGuidewires(loc.x,loc.y)
           }
       }
   }
   canvas.onmouseup=function(e){
       loc=windowToCanvas(e.clientX,e.clientY)
       restoreDrawingSurface()
       updataRubberband(loc)
       dragging=false
   }
   strokeStyleSelect.onchange=function(){

       context.strokeStyle=strokeStyleSelect.value
   }