擦除一定数量后全部消失的有用 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)<0.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;
}
})
}
时间： 2024-08-29 10:16:46