来自 Web前端 2020-01-18 01:08 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

js canvas实现擦除动画_javascript技巧_脚本之家

时间: 2019-08-18阅读: 211标签: 图片

即可以创建一个两倍于实际大小的canvas,然后用css样式把canvas限定在实际的大小。或者用github上的这个polyfill, 但是我试过了好像不太好用。

需求:背景图片和二维码还有用户微信头像生成一张图片,可供用户下载。打开页面的时候就是一张图可以保存,html2canvas插件即可实现效果,效果是实现了,但是很郁闷,图片模糊了。。。。

因为我是直接在页面上显示擦除动画,不需要用户自己去擦,所以擦除区域的坐标都是我自己计算的。然后利用requestAnimationFrame来实现动画,开始用的是setInterval,发现到后面setInterval总是会乱掉,所以建议不要使用setInterval。在实现这个效果的过程中发现,利用canvas在页面上drawImage时,图片变的很模糊?

生成的图片的样式层级设置到最高,发现跟图片差不多清晰了,终于解决了这个大坑!

 let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;let cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;let a = 60;let canvasCleaner = document.getElementById;let ctxCleaner = canvasCleaner.getContext;let canvasCleanerBox = document.querySelector;let imgCleaner = new Image();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 = ()=> { let width = 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';}let drawline = => { ctx.save; ctx.arc(x1,y1, a, 0, 2 * Math.PI); ctx.fill 方法填充当前的图像。默认颜色是黑色。 ctx.restore();};/* d 为擦除区域点坐标,我自己模拟需要擦除的形状得到的数据类似如下:let d2 = [ [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];*/let draw = => { if { cancelAnimationFrame; }else { drawline(d[idx][0], d[idx][1],ctx); idx++; requestAnimationFrame; }); }}

1.先获取设备的PixelRatio,可参考hidpi-canvas提供的方法getPixelRatio.2.将canvas的容器扩大PixelRatio倍,再将画布缩放,将图像放大PixelRatio倍。部分代码

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*; // console.log; ctx.drawImage(img, 0, 0, canvas.width , w);

解决方案

本文实例为大家分享了canvas擦除动画的实现原理、实现代码、以及在实现过程中遇到的问题,供大家参考,具体内容如下

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:js canvas实现擦除动画_javascript技巧_脚本之家

关键词: