刮刮乐案例
Posted m0_53895172
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了刮刮乐案例相关的知识，希望对你有一定的参考价值。
写在前面
想必大家都玩过刮刮乐叭,但你是否知道如何在电脑上实现类似刮刮乐的效果嘛,今天我就来为大家展示~
效果图
代码区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
position: relative;
border: 1px solid #000;
width: 250px;
height: 60px;
font-size: 40px;
color: red;
text-align: center;
line-height: 60px;
/* 文字不被选中 */
user-select: none;
}
canvas{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>特等奖
<canvas width="250" height="60"></canvas>
</div>
</body>
<script>
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#333";
ctx.fillRect(0,0,250,60);
ctx.globalCompositeOperation = "destination-out";
// 鼠标按下
canvas.onmousedown = function(){
// 鼠标移动
canvas.onmousemove = function(e){
ctx.arc(e.pageX,e.pageY,10,0,7);
ctx.fill();
}
}
</script>
</html>
实现步骤
- 首先我们在页面中建立一个div盒子,将我们的canvas画布置入其中
- 利用js在画布里面绘制矩形,以充当刮奖时的背景色
ctx.fillStyle = "#333";
ctx.fillRect(0,0,250,60);
- 当鼠标按下时,设置鼠标移动事件,再次利用画布绘制一个圆形
canvas.onmousedown = function(){
// 鼠标移动
canvas.onmousemove = function(e){
ctx.arc(e.pageX,e.pageY,10,0,7);
ctx.fill();
}
}
- 利用合成属性
ctx.globalCompositeOperation = "destination-out";,实现刮刮乐效果~(此案例的精髓所在)
结语
哎,刮刮乐，就是玩儿~.简单上手的刮刮乐,你值得拥有🤖😻🐶
以上是关于刮刮乐案例的主要内容，如果未能解决你的问题，请参考以下文章
Python实战项目做一个 刮刮乐 案例！一不小心竟然....着实惊艳到我了！！！
Python实战项目做一个 刮刮乐 案例，一不小心....着实惊艳到我了。
❤️只用一个脚本做一个 刮刮乐 案例，一不小心刮出来一个女朋友！❤️学习娱乐一下