js+canvas实现刮刮奖功能

本文实例为大家分享了js+canvas实现刮刮奖的具体代码，供大家参考，具体内容如下

1.实现了PC端的刮刮奖效果

2.使用了canvas的文本，像素操作，合成，绘制图形，随机数

 
 
 
 
 * {
 margin: 0;
 padding: 0;
 }
 
 .box {
 width: 500px;
 height: 500px;
 margin: 0 auto;
 position: relative;
 background: #00BFFF;
 }
 
 #prize {
 width: 300px;
 height: 100px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -50px 0 0 -150px;
 background: #fff;
 font-family: "微软雅黑";
 font-size: 40px;
 text-align: center;
 line-height: 100px;
 -webkit-user-select: none;
 }
 
 #myCanvas {
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -50px 0 0 -150px;
 }
 
 

 
 
 
 
 
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。