js canvas实现擦除动画
本文实例为大家分享了canvas擦除动画的实现原理、实现代码、以及在实现过程中遇到的问题，供大家参考，具体内容如下
原理总结为就是在移动设备上将某张图片擦掉显示另一张图片，利用canvas来实现。
如果是用户手动擦除，则需要监听touchmove,touchend等事件，并计算相应的坐标，利用canvas的clearRect或rect画弧线或画线来实现。但是这会造成在androd手机上存在卡顿的现象。
canvas有个globalCompositeOperation属性，这个属性的默认值是source-over,即当你在已有像素上进行绘图时会叠加。但是还有一个属性是destination-out,即在源图像外显示自己的目标图像，也就是在已有像素基础上绘图时，你绘制的区域里已有像素会被置为透明，有了这个属性后就意味着不需要用到clip等系列函数，直接用粗线条或者弧线就可以了，这样一来就减少绘图环境api的调用，性能会得到提升，在android上运行也会流畅很多。
下面来展示下我的擦除代码：
letrequestAnimationFrame=
window.requestAnimationFrame||
window.mozRequestAnimationFrame||
window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;
letcancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame;
leta=60;
letcanvasCleaner=document.getElementById('cas-1');
letctxCleaner=canvasCleaner.getContext('2d');
letcanvasCleanerBox=document.querySelector('.slide-4');
letimgCleaner=newImage();
canvasCleaner.width=canvasCleanerBox.clientWidth*2;
canvasCleaner.height=canvasCleanerBox.clientHeight*2;
canvasCleaner.style.width=canvasCleanerBox.clientWidth+'px';
canvasCleaner.style.height=canvasCleanerBox.clientHeight+'px';
imgCleaner.src='https://gw.alicdn.com/tps/TB1XbyCKVXXXXXEXpXXXXXXXXXX-1080-1920.jpg';
imgCleaner.onload=()=>{
letwidth=parseInt(canvasCleaner.style.width);
w=canvasCleaner.width*(imgCleaner.height/imgCleaner.width);
ctxCleaner.drawImage(imgCleaner,0,0,canvasCleaner.width,w);
ctxCleaner.lineCap='round';//lineCap属性设置或返回线条末端线帽的样式。
ctxCleaner.lineJoin='round';
ctxCleaner.lineWidth=100;//设置或返回当前线条的宽度
ctxCleaner.globalCompositeOperation='destination-out';
}
letdrawline=(x1,y1,ctx)=>{
ctx.save();
ctx.beginPath();
ctx.arc(x1,y1,a,0,2*Math.PI);
ctx.fill();//fill()方法填充当前的图像（路径）。默认颜色是黑色。
ctx.restore();
};
/*d为擦除区域点坐标，我自己模拟需要擦除的形状得到的数据类似如下：
letd2=[
[1,190],[30,180],[60,170],[90,168],[120,167],[150,165],[180,164],[210,163],[240,160],[270,159],[300,154],[330,153],[360,152],
[390,150],[420,140],[450,130],[480,120],[510,120],[540,120],[570,120],[600,120],[630,120],[660,120],[690,120],[720,120],
[1,190],[20,189],[28,186],[45,185],[50,185],[62,184],[64,182],[90,180],[120,178],
[160,176],[200,174],[240,172];*/
letdraw=(d,ctx)=>{
if(idx>=d.length){
cancelAnimationFrame(ts);
}else{
drawline(d[idx][0],d[idx][1],ctx);
idx++;
requestAnimationFrame(()=>{
draw(d,ctx);
});
}
}
因为我是直接在页面上显示擦除动画，不需要用户自己去擦，所以擦除区域的坐标都是我自己计算的。然后利用requestAnimationFrame来实现动画，开始用的是setInterval，发现到后面setInterval总是会乱掉，所以建议不要使用setInterval。
在实现这个效果的过程中发现，利用canvas在页面上drawImage时，图片变的很模糊？
原来是因为在浏览器的window变量中有一个 devicePixelRatio属性，该属性决定了浏览器会用几个（通常是2个）像素点来渲染一个像素。即假设devicePixelRatio的值为2，一张100*100像素大小的图片，在retina屏幕下，会用2个像素点的宽度去渲染图片的1个像素点，因此该图片在retina屏幕上实际会占据200＊200像素的空间，相当于图片被放大了一倍，因此图片变的模糊。
这样关于canvas的问题就容易解决了。我们可以将canvas当成是一张图片，当浏览器去渲染canvas的时候，他会用2个像素点的宽度去渲染canvas,因此在大多数retina设备的浏览器中会出现绘制的图片或文字模糊的情况。
类似的，在canvas context中也存在一个webkitBackingStorePixelRatio属性（仅safari和chrome），该属性的值决定了浏览器在渲染canvas之前会用几个像素来存储画布信息。在ios6下的safari中的值是2，因此，如果将一张100*100的图片绘制在safari中，该图片首先会在内存中生成一张200＊200的图片，然后浏览器渲染的时候，会按100x100的图片来渲染，因此就变成了200x200，正好和内存中的图片大小一致，因此在iOS的safari中不会出现失真的问题。但是在chrome和iOS7的safari中却出现了失真，其原因是，chrome和iOS7中的safari的webkitBackingStorePixelRatio值都是1。
解决办法：
canvas.width=canvasBox.clientWidth*2; canvas.height=canvasBox.clientHeight*2; canvas.style.width=canvas.clientWidth+'px'; canvas.style.height=canvas.clientHeight*'px'; w=canvas.width*(img.height/img.width); //console.log(w); ctx.drawImage(img,0,0,canvas.width,w);
即可以创建一个两倍于实际大小的canvas，然后用css样式把canvas限定在实际的大小。或者用github上的这个polyfill,但是我试过了好像不太好用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。