JS实现canvas仿ps橡皮擦刮卡效果详解

目录

效果演示：

30; canvas.width = document.getElementById("bb").clientWidth; canvas.height = document.getElementById("bb").clientHeight; var img = new Image(); img.src = "sha.jpg"; img.onload = function() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height) //ctx.fillRect(0,0,canvas.width,canvas) tapClip() } //通过修改globalCompositeOperation来达到擦除的效果 function tapClip() { var hastouch = "ontouchstart" in window ? true : false, tapstart = hastouch ? "touchstart" : "mousedown", tapmove = hastouch ? "touchmove" : "mousemove", tapend = hastouch ? "touchend" : "mouseup"; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.lineWidth = a * 2; ctx.globalCompositeOperation = "destination-out"; 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.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 += jiange) { for (var y = 0; y < imgData.height; y += jiange) { var i = (y * imgData.width + x) * 4; if (imgData.data[i + 3] > 0) { dd++ } 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 += jiange) { for (var y = 0; y < imgData.height; y += jiange) { var i = (y * imgData.width + x) * 4; if (imgData.data[i + 3] > 0) { dd++ } } } }, totimes) }); } </script> <script type="text/javascript"> MuNEwASK window.setTimeout('CountDown()', 100); // End </script>

以上就是JS实现canvas仿ps橡皮擦刮卡效果详解的详细内容，更多关于JS 的资料请关注我们其它相关文章！