?🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? ?簡歷模板、學習資料、面試題庫、技術互助【關注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝 ??

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

代碼目錄：

主要代碼實現：

CSS樣式：

body {margin: 0;padding: 0;}.box {position: absolute;left: 0;top: 0;bottom: 0;right: 0;background: url("girl1.jpg") no-repeat;background-size: 100% 100%;backface-visibility: hidden;overflow: hidden;}#cas {width: 100%;height: 100%;opacity: 1;-webkit-transition: opacity .5s;-ms-transition: opacity .5s;-moz-transition: opacity .5s;}.noOp {opacity: 0 !important;}

HTML代碼 :

<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)});function tapmoveHandler(e) {clearTimeout(timeout)e.preventDefault()x2 = hastouch ? e.targetTouches[0].pageX : e.clientX - canvas.offsetLeft;y2 = hastouch ? e.targetTouches[0].pageY : e.clientY - canvas.offsetTop;ctx.save();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();ctx.restore()x1 = x2;y1 = y2;}})}//使用clip來達到擦除效果function otherClip() {var hastouch = "ontouchstart" in window ? true : false,tapstart = hastouch ? "touchstart" : "mousedown",tapmove = hastouch ? "touchmove" : "mousemove",tapend = hastouch ? "touchend" : "mouseup";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, a, 0, 2 * Math.PI);ctx.clip()ctx.clearRect(0, 0, canvas.width, canvas.height);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)});function tapmoveHandler(e) {e.preventDefault()x2 = hastouch ? e.targetTouches[0].pageX : e.clientX - canvas.offsetLeft;y2 = hastouch ? e.targetTouches[0].pageY : e.clientY - canvas.offsetTop;var asin = a * Math.sin(Math.atan((y2 - y1) / (x2 - x1)));var acos = a * Math.cos(Math.atan((y2 - y1) / (x2 - x1)));var x3 = x1 + asin;var y3 = y1 - acos;var x4 = x1 - asin;var y4 = y1 + acos;var x5 = x2 + asin;var y5 = y2 - acos;var x6 = x2 - asin;var y6 = y2 + acos;ctx.save()ctx.beginPath()ctx.arc(x2, y2, a, 0, 2 * Math.PI);ctx.clip()ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.restore();ctx.save()ctx.beginPath()ctx.moveTo(x3, y3);ctx.lineTo(x5, y5);ctx.lineTo(x6, y6);ctx.lineTo(x4, y4);ctx.closePath();ctx.clip()ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.restore();x1 = x2;y1 = y2;}})}</script><script type="text/javascript">window.setTimeout('CountDown()', 100);// End</script>

上面的圖片文件需要引入

源碼獲取

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

打卡 文章 更新?53??/? 100天

精彩推薦更新中：

HTML5大作業實戰案例《100套》

Java畢設項目精品實戰案例《100套》

總結

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

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