How to realize the effect of canvas imitating ps eraser card by JS
This article mainly introduces JS how to achieve canvas imitation ps eraser card effect, has a certain reference value, interested friends can refer to, I hope you read this article after a great harvest, the following let Xiaobian with everyone to understand.
Effect demonstration:
Main JS code implementation
var canvas = document.getElementById("cas"), ctx = canvas.getContext("2d"); var x1, y1, a = 30, timeout, totimes = 100, jiange = 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() } //erase by modifying 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++ } } } if (dd / (imgData.width * imgData.height / (jiange * jiange))
< 0.4) { canvas.className = "noOp"; } }, totimes) }); 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++ } } } }, totimes) }); } window.setTimeout('CountDown()', 100); // End Thank you for reading this article carefully. I hope that the article "JS how to achieve canvas imitation ps eraser scratch card effect" shared by Xiaobian will help everyone. At the same time, I hope that everyone will support it a lot. Pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!
