🍅 作者主页：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套》