canvas 橡皮擦效果制作

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

擦除一定数量后全部消失的有用 imageData 方法的我把代码贴在最下面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <style type="text/css">
body{
overflow: hidden;
}
#canvas{
display: block;
margin: 0 auto;
border: 2px solid #008000;
background: url(img2.jpg) no-repeat;
background-size: cover;
}
*{margin: 0;padding: 0;}
</style>
</head>
<body> <canvas id="canvas" width="800" height="400"></canvas> </body> <script type="text/javascript"> var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d'); cvs.width = window.innerWidth;
cvs.height = window.innerHeight; var cvsWidth = cvs.width;
var cvsHeight = cvs.height;
var iNow = false;
var r = 30;
var num = 0;
var img =new Image()
img.src="img1.jpg" var hastouch = "ontouchstart" in window?true:false,
tapstart = hastouch?"touchstart":"mousedown",
tapmove = hastouch?"touchmove":"mousemove",
tapend = hastouch?"touchend":"mouseup"; img.onload = function(){
bottomImg();
clickDraw();
}
function bottomImg(){
ctx.drawImage(img,0,0,cvsWidth,cvsHeight)
}
function clickDraw(){
cvs.addEventListener(tapstart,function(e){ e.preventDefault(); x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop; ctx.lineCap = "round";//设置线条两端为圆弧
ctx.lineJoin = "round";//设置线条转折为圆弧
ctx.lineWidth = r*2;
ctx.globalCompositeOperation = "destination-out"; ctx.save();
ctx.beginPath()
ctx.arc(x1,y1,1,0,2*Math.PI);
ctx.fill();
ctx.restore(); iNow = true;
cvs.addEventListener(tapmove,function(e){
e.preventDefault()
if( iNow ){
var lx = hastouch?e.targetTouches[0].pageX:e.clientX-cvs.offsetLeft;
var ly = hastouch?e.targetTouches[0].pageY:e.clientY-cvs.offsetTop;
round(lx,ly)
num++
console.log(num);
num>500?ctx.clearRect(0,0,cvsWidth,cvsHeight):''
}
})
})
cvs.addEventListener(tapend,function(){
iNow = false;
})
}
function round(ex,ey){
x2 = ex
y2 = ey ctx.save();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
ctx.restore() x1 = x2;
y1 = y2;
} </script>
</html>

以下是使用getImageData方式消除剩余部分

//通过修改globalCompositeOperation来达到擦除的效果
function tapClip(){
var hastouch = "ontouchstart" in window?true:false,
tapstart = hastouch?"touchstart":"mousedown",
tapmove = hastouch?"touchmove":"mousemove",
tapend = hastouch?"touchend":"mouseup"; canvas.addEventListener(tapstart , function(e){
clearTimeout(timeout)
e.preventDefault(); x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop; ctx.lineCap = "round";//设置线条两端为圆弧
ctx.lineJoin = "round";//设置线条转折为圆弧
ctx.lineWidth = a*2;
ctx.globalCompositeOperation = "destination-out"; ctx.save();
ctx.beginPath()
ctx.arc(x1,y1,1,0,2*Math.PI);
ctx.fill();
ctx.restore(); canvas.addEventListener(tapmove , tapmoveHandler);
canvas.addEventListener(tapend , function(){
canvas.removeEventListener(tapmove , tapmoveHandler);timeout = setTimeout(function(){
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
var dd = 0;
for(var x=0;x<imgData.width;x+=30){
for(var y=0;y<imgData.height;y+=30){
var i = (y*imgData.width + x)*4;
if(imgData.data[i+3] > 0){
dd++
}
}
}
if(dd/(imgData.width*imgData.height/900)<.4){
canvas.className = "noOp";
}
},100)
});
function tapmoveHandler(e){
e.preventDefault()
x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop; ctx.save();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
ctx.restore() x1 = x2;
y1 = y2;
}
})
}