这篇文章主要介绍了基于canvas剪辑区域功能实现橡皮擦效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下

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

?

Document

*{padding: 0;margin: 0}

a{text-decoration: none}

img{border: none}

ul,ol{list-style: none}

br{font-size: 0;line-height: 0;font-size: 0}

canvas{border: 1px solid red;background: white}

body{background: gray;text-align: center}

下面是重点的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() 582735936

}

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.οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=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()

}

}

总结

以上所述是小编给大家介绍的基于canvas剪辑区域功能实现橡皮擦效果，希望对大家有所帮助