???? 作者主页：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天
