虽然网上看了很多的canvas实现刮涂层抽奖效果的例子,但大多数都是将写好的代码封装起来了,这让很多初学者看了很头疼(反正我是头疼了)。所以,今天用最最最原始的js写了一个,便于初学者学习和接受。如果有用的话,请点个赞。图片自己找张替换上就可以了,注意图片路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<div><img src="images/0.jpg" alt="" style="width: 20%"></div>
<canvas id="myCanvas"></canvas>
<script !src="">
<!-- 定义变量 -->
var isFlag = false;
var moveX,moveY;
var img = new Image();
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext('2d');
myCanvas.width = "400";
myCanvas.height = "400";
ctx.lineWidth = 30;
ctx.beginPath();
ctx.fillStyle = "#e2e2e2"
ctx.fillRect(0,0,400,400);
myCanvas.addEventListener("mousedown",function (e) {
console.log("开始" ,e)
isFlag = true;
moveX = e.clientY - myCanvas.offsetLeft;
moveY = e.clientY - myCanvas.offsetTop;
ctx.moveTo(moveX,moveY);
});
myCanvas.addEventListener("mousemove",function (e) {
if (isFlag){
console.log("移动" ,e);
ctx.globalCompositeOperation = "destination-out";
ctx.lineCap = "round";
ctx.beginPath();
ctx.lineTo(e.clientX-myCanvas.offsetLeft,e.clientY-myCanvas.offsetTop)
ctx.stroke();
ctx.globalCompositeOperation = "destination-over";
img.src = "images/0.jpg"
img.onload = function () {
ctx.beginPath();
ctx.drawImage(img,0,0,400,400);
}
}
});
myCanvas.addEventListener("mouseup",function (e) {
console.log("结束" ,e)
isFlag = false;
});
</script>
</body>
</html>