🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、【java李楊勇】公號(hào)作者? ?簡歷模板、學(xué)習(xí)資料、面試題庫、技術(shù)互助【關(guān)注我，都給你】

🍅 歡迎點(diǎn)贊 👍 收藏 ?留言 📝 ??

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

代碼目錄：?

?

主要代碼實(shí)現(xiàn)：

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>

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

源碼獲取

大家可以點(diǎn)贊、收藏、關(guān)注、評論我啦 、查看博主主頁或下方微信公眾號(hào)獲取更多~！

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

精彩推薦更新中：

HTML5大作業(yè)實(shí)戰(zhàn)案例《100套》

Java畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例《100套》?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。