这是我参与新手入门的第三篇文章
今天浏览网页看到一个抽奖的页面，想起了之前自己写的一个刮刮乐小游戏。就这一个简易的抽奖小游戏，写一篇文章说道说道。
这篇文章给你带来一个小游戏的制作，在让你娱乐的同时，可以学习一下canvas的使用方法。那么接下来开始我们的快乐之旅吧。
准备一点原材料，html
一些简单的dom结构，当然你也可以写的简单一些或者更丰富一点。
<body>
<div class="box">
<h2>刮 刮 乐</h2>
<div class="jiang">奖</div>
<div class="prize">
<div class="content">500万</div>
<canvas id="canvas" width="300" height="200"></canvas>
</div>
</div>
</body>
处理一下原材料，css
让我们给html穿件衣裳，俗话说:“人靠衣装马靠鞍,狗配铃铛跑的欢”，穿上css，html也变得靓丽多彩了呢。当然，根据你的喜好，你可以给它自行设计衣服样式。样式这一块我就不多加赘述了，小伙伴们可以参考一下。
*{
margin: 0;
padding: 0;
}
body{
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box{
margin: 60px 100px;
width:300px;
height:500px;
border:1px solid red;
background:rgba(255,0,0,.8);
}
h2{
text-align: center;
font-size: 30px;
color:cyan;
}
.jiang{
width:200px;
height: 200px;
border-radius: 50%;
background-color:rgba(255,0,0,.3);
line-height: 200px;
text-align: center;
font-size: 60px;
color:gold;
margin:20px auto;
}
.prize{
height:200px;
position: relative;
}
.content{
width:300px;
height: 200px;
background-color:rgba(0,0,255,0.1);
line-height: 200px;
text-align: center;
font-size: 60px;
color:purple;
margin:20px auto;
}
#canvas{
position:absolute;
top: 0;
left: 0;
cursor: url('xpc.cur'),pointer;
}
下锅，canvas
万事俱备只欠东风，哦不，只欠我们的canvas操作了。
- 创建画布
var canvas=document.querySelector('#canvas')
var ctx=canvas.getContext('2d')
- 给画布一个底色
ctx.fillStyle='lightgray'
ctx.fillRect(0,0,300,200)
ctx.save()
- 刮奖和中奖提示字体
ctx.font='30px serif'
ctx.fillStyle='black'
ctx.fillText('刮奖区',100,60)
ctx.save()
ctx.font='50px serif'
ctx.strokeStyle='red'
ctx.strokeText('大吉大利',50,150)
- 刮奖操作 创建一个橡皮擦方块，大小自己可以设置，然后在按下鼠标移动的时候执行此函数。
canvas.onmousedown=function(){
window.onmousemove=function(event){
ctx.clearRect(event.offsetX,event.offsetY,20,20);
}
}
canvas.onmouseup = function(){
window.onmousemove=function(){}
}
是不是很简单呢，让我们看一下效果吧
总结
这是我几年前写的一个简易的游戏，小伙伴们可以根据自己的需求来修改一下。比如说样式、信息提示、刮奖交互等等。希望这篇文章可以给你带来帮助。
今天的文章Canvas小游戏之刮刮乐分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/21200.html
