您的位置：首页 > 其它

canvas 橡皮擦效果制作

2016-04-03 16:44 316 查看

擦除一定数量后全部消失的有用 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;
}
})
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航