效果演示：?文末獲取源碼?

主要JS代碼實現

<div class="box" id="bb"><canvas id="cas" width="1366" height="651"></canvas></div><script type="text/javascript" charset="utf-8">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()}//通過修改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)});}</script><script type="text/javascript">window.setTimeout('CountDown()', 100);// End</script>

源碼獲取

大家點贊、收藏、關注、評論我啦 、查看下方微信公眾號獲取~！

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现canvas仿ps橡皮擦刮卡效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。