利用canvas剪辑区域功能实现橡皮擦效果

效果如图

这是基础结构 没什么好说的

    
    
    
    
    


        

                Stroke color: 
                                 red
                                 green
                                 blue
                                 orange
                                 cornflowerblue
                                 goldenrod
                                 navy
                                 purple
                                 purple
                              
         
                Fill color: 
                                 semi-transparent red
                                 green
                                 semi-transparent blue
                                 orange
                                 semi-transparent cornflowerblue
                                 goldenrod
                                 navy
                                 purple
                              
         
                Draw  
                Erase 
         
               Eraser: 
                               circle
                               square
                              
         
               Eraser width: 
                               25
                               50
                               75
                               100
                               125
                               150
                               175
                               200
                              
             

    

 

下面是重点的js
这里有个坑要十分注意 调用clip()方法的时候，所定义的剪辑区域总是局限于期初的那个剪辑区域范围。
简单来说 clip()方法总是在上一次的剪辑区域基础上进行操作，所以说我们要把clip()方法放在save()和restore()方法中

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
strokeStyleSelect = document.getElementById('strokeStyleSelect'),    //画图的描边颜色
fillStyleSelect = document.getElementById('fillStyleSelect'),       //画图填充颜色
drawRadio = document.getElementById('drawRadio'),                   //画图按钮
eraserRadio = document.getElementById('eraserRadio'),              //橡皮擦按钮  
eraserShapeSelect = document.getElementById('eraserShapeSelect'),  //橡皮擦形状
eraserWidthSelect = document.getElementById('eraserWidthSelect'), //橡皮擦宽度
ERASER_LINE_WIDTH = 1,
drawingSurfaceImageData,
lastX,
lastY,
mousedown = {},
rubberbandRect = {},
dragging = false

function windowToCanvas(x,y){  //这个函数的作用是捕捉鼠标点在canvas上的坐标
   var bbox=canvas.getBoundingClientRect()
   return {
       x:x-bbox.left,
       y:y-bbox.top
   }

}
function saveDrawingSurface(){   //这个函数的作用是初始化读取画布信息并储存起来
    drawingSurfaceImageData=context.getImageData(0,0,canvas.width,canvas.height)
}
function restoreDrawingSurface(){  //这个函数的作用是读取画布信息
    context.putImageData(drawingSurfaceImageData,0,0)
}

function drawGrid(){  //这个函数的作用是填充进橡皮擦的剪辑区域
   context.save()
   context.fillStyle="#fff"
    context.fillRect(0,0,canvas.width,canvas.height)
    context.restore()
}
function drawrubber(x,y){
   context.beginPath()
   context.arc(x,y,eraserWidthSelect.value,0,Math.PI*2,false)
   context.clip()
}
function drawCri(x,y){
   var x_width=Math.abs(x-mousedown.x)
   var y_width=Math.abs(y-mousedown.y)
   var radius=Math.sqrt(x_width*x_width+y_width*y_width)
   
  context.save()
   context.beginPath()
   context.fillStyle=fillStyleSelect.value;
   context.arc(mousedown.x,mousedown.y,radius,0,Math.PI*2,false)
   context.fill()
  context.restore()


}


canvas.onmousedown=function(e){

    var loc=windowToCanvas(e.clientX,e.clientY)
 
    
    mousedown.x=loc.x
    mousedown.y=loc.y

    lastX=loc.x
    lastY=loc.y
    saveDrawingSurface()
    dragging=true
}
canvas.onmousemove=function(e){

    
    if(dragging){
        var loc=windowToCanvas(e.clientX,e.clientY)
        if(drawRadio.checked){ //如果是画图状态
           // 
            restoreDrawingSurface()
            drawCri(loc.x,loc.y)
            
        }else{ //如果是橡皮擦状态
            context.save()
            drawrubber(loc.x,loc.y)
            drawGrid()
            context.restore()
        
           
        }


    }
  


}
canvas.onmouseup=function(e){
   dragging=false;
   var loc=windowToCanvas(e.clientX,e.clientY)

   if(drawRadio.checked){
    lastX=loc.x;
    lastY=loc.y;
    restoreDrawingSurface()
    drawCri(lastX,lastY)
         
       
   }else{
    context.save()
    drawrubber(loc.x,loc.y)
    drawGrid()
    context.restore()
   }

    
}