js移动端刮奖Demo

最新推荐文章于 2024-08-18 20:11:48 发布

狼牙冷

最新推荐文章于 2024-08-18 20:11:48 发布

阅读量2.7k

点赞数

分类专栏： JS 文章标签： javascript js 刮一刮刮奖刮刮乐

本文链接：https://blog.csdn.net/jimolangyaleng/article/details/53735386

版权

现在刮奖的方式很多，有轮盘抽奖也有刮刮乐的方式抽奖，先在就用js处理一下刮刮乐刮奖方式（以下是移动端处理的刮奖）：

直接上代码片段咯:

HTML代码

<body >
	    <div id='guaJiang'>
			<div class='bjc'>萌赚送你1.5</div>
			<canvas id="myCanvas" class='guaCanvas' width="240" height="70"></canvas>
		</div>
    </body>

CSS样式

 #guaJiang .bjc {
			    color: black;
			    height: 70px;
			    width: 240px;
			    text-align: center;
			    line-height: 70px;
			    font-size: 20px;
			    position: absolute;
			    top: 300px;
			    left: 60px;
			    background-image: url(img/4-01.png);
			    background-repeat: no-repeat;
			    background-size: 18px 18px;
			    background-position: 80% 53%
			}
			#guaJiang .guaCanvas {
			    z-index: 3;
			    position: absolute;
			    to