用canvas实现一个刮刮卡效果
|
admin
2024年10月30日 13:27
本文热度 541
|
先看上面的效果,这是常见的刮刮卡抽奖效果,那么前端如何使用代码实现这样的效果呢?主流方案是采用canvas
来实现。
首先要实现这种效果,核心是要知道canvas
的globalCompositeOperation
属性,这个属性的作用是控制canvas
上不同图层之间的显示效果。
这里我们需要使用到的globalCompositeOperation
的destination-out
属性,这个属性描述的效果是,当新图层绘制到原始图层上时候,原始图层保持在新图层不重叠的部分,仅保留现有画布内容和新形状不重叠的部分。
有了这个效果之后,我们只需要将要显示的东西放置在canvas
后面就可以了,至于刮刮卡的效果,就是在 mosemove
事件里面,动态绘制透明的图层到 canvas 上就好了。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,html {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.box {
user-select: none;
position: relative;
border: 2px solid #333;
width: 400px;
height: 120px;
font-size: 50px;
line-height: 120px;
text-align: center;
}
#myCanvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
恭喜您,中奖了
<canvas id="myCanvas" width="400px" height="120px"></canvas>
</div>
</body>
<script type="text/javascript">
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#ccc';
ctx.fillRect(0, 0, 400, 120);
ctx.globalCompositeOperation = "destination-out";
canvas.onmousedown = function() {
canvas.onmousemove = function(event) {
ctx.beginPath();
ctx.arc(event.offsetX, event.offsetY, 16, 0, 7, false);
ctx.fill();
}
}
document.body.onmouseup = function() {
canvas.onmousemove = null;
}
</script>
</html>
arc(x, y, r, startAngle, endAngle, anticlockwise):
以(x, y) 为圆心,以r 为半径,从 startAngle 弧度开始到endAngle弧度结束。
anticlosewise 是布尔值,true 表示逆时针,false 表示顺时针(默认是顺时针)。
注意:这里的度数都是弧度;0 弧度是指的 x 轴正方向。
该文章在 2024/10/30 15:13:15 编辑过