🍅 作者主頁：Java李楊勇?

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

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

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

代碼目錄：?

?

主要代碼實現：

CSS樣式：

* {margin: 0;padding: 0;}.box {width: 320px;height: 410px;background: url("img/gao1.jpg") no-repeat;background-size: 100% 100%;position: relative;/*margin: 0 auto;*/}#myCanvas {position: absolute;left: 0;top: 0;}

javascript代碼 :

<script type="text/javascript">var myCanvas = document.getElementById("myCanvas");var can = myCanvas.getContext("2d");var X = myCanvas.width;var Y = myCanvas.height;var oImg = new Image();oImg.src = "img/gao4.jpeg";oImg.onload = function() {can.beginPath();can.drawImage(oImg, 0, 0, X, Y);can.closePath();}var device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());var startEvtName = device ? "touchstart" : "mousedown";var moveEvtName = device ? "touchmove" : "mousemove";var endEvtName = device ? "touchend" : "mouseup";function draw(event) {var x = device ? event.touches[0].clientX : event.clientX;var y = device ? event.touches[0].clientY : event.clientY;//console.log(x,y);can.beginPath();can.globalCompositeOperation = "destination-out";can.arc(x, y, 20, 0, Math.PI * 2, false);can.fill();can.closePath();}//true 捕獲 false 冒泡myCanvas.addEventListener(startEvtName, function() {myCanvas.addEventListener(moveEvtName, draw, false);}, false);myCanvas.addEventListener(endEvtName, function() {myCanvas.removeEventListener(moveEvtName, draw, false);}, false); </script>

上面的圖片大家引入自己喜歡的就行?

源碼獲取

大家可以點贊、收藏、關注、評論我啦 、查看博主主頁或下方微信公眾號獲取更多~！

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

精彩推薦更新中：

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

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

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️canvas手机刮刮乐女朋友效果❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

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