HTML5 Canvas圆盘抽奖应用DEMO演示

HTML5 herman 3117浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

我们经常参加各种电商优惠活动,比如购买达到一定数额进行抽奖活动,在比如微信抽奖,淘宝抽奖,迅雷赚钱宝圆盘抽奖活动等。这些抽奖活动部分就是由HTML5的Canvas来制作的,今天就为大家分享一下如何使用HTML5的Canvas来制作圆盘抽奖功能。老规矩,先看下效果图吧:

再来看看Canvas的几个主要api:

方法 用途
getContext(contextId) 公开在canvas上绘图需要的API。惟一(当前)可用的contextID是 2d。
height 设置 canvas 的高度。默认值是 150 像素。
width 设置 canvas 的宽度。默认值是 300 像素。
createLinearGradient(x1,y1,x2,y2) 创建一个线性渐变。起始坐标为x1,y1,结束坐标为x2,y2。
createRadialGradient(x1,y1,r1,x2,y2,r2) 创建一个放射状渐变。圆圈的起始坐标是x1,y1,半径为r1。圆圈的结束坐标为x2,y2,半径为r2。
addColorStop(offset, color) 向一个渐变添加一个颜色停止。颜色停止(color stop)是渐变中颜色更改发生的位置。offset必须介于0到1之间。
fillStyle 设置用于填充一个区域的颜色 — 例如,fillStyle='rgb(255,0,0)'.
strokeStyle 设置用于绘制一根直线的颜色 — 例如,fillStyle='rgb(255,0,0)'.
fillRect(x,y,w,h) 填充一个定位于 x 和 y,宽度和高度分别为 w 和 h 的矩形。
strokeRect(x,y,w,h) 绘制一个定位于 x 和 y,宽度和高度分别为 w 和 h 的矩形的轮廓。
moveTo(x,y) 将绘图位置移动到坐标 x,y。
lineTo(x,y) 从绘图方法结束的最后位置到 x,y 绘制一条直线。

全部源代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas圆盘抽奖应用DEMO演示</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
*{padding: 0px;margin: 0px;font-size: 16px;font-family: "Microsoft YaHei";}
.xttblog_box{width: 300px;height: 300px;margin: 100px auto;position: relative; }
.xttblog_box canvas{position: absolute;}
#xttblog{background-color: white;border-radius: 100%;}
#xttblog01,#xttblog03{left: 50px;top: 50px;z-index: 30;}
#xttblog02{left: 75px;top: 75px;z-index: 20;}
#xttblog{-o-transform:  transform 6s;-ms-transform:  transform 6s;-moz-transform:  transform 6s;		
-webkit-transform:  transform 6s;transition: transform 6s;-o-transform-origin:  50% 50%;
-ms-transform-origin:  50% 50%;-moz-transform-origin:  50% 50%;-webkit-transform-origin:  50% 50%;
transform-origin: 50% 50%;}
.taoge_btn{width: 60px;height: 60px;left: 120px;top: 120px;border-radius: 100%;
position: absolute;cursor: pointer;border: none;background: transparent;
outline: none;z-index: 40;}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
	//旋转角度
	var angles;
	//可抽奖次数
	var clickNum = 5;
	//旋转次数
	var rotNum = 0;
	//中奖公告
	var notice = null;
	//转盘初始化
	var color = ["#626262","#787878","rgba(0,0,0,0.5)","#DCC722","white","#FF4350"];
	var info = ["谢谢参与","  1000","   10","  500","  100"," 4999","    1","   20"];
	var info1 = ['再接再厉','      元','     元','  淘金币','     元','  淘金币','     元','  淘金币']
	canvasRun();
	$('#tupBtn').bind('click',function(){
		if (clickNum >= 1) {
			//可抽奖次数减一
			clickNum = clickNum-1;
			//转盘旋转
			runCup();
			//转盘旋转过程“开始抽奖”按钮无法点击
			$('#tupBtn').attr("disabled", true);
			//旋转次数加一
			rotNum = rotNum + 1;
			//“开始抽奖”按钮无法点击恢复点击
			setTimeout(function(){
				alert(notice);
				$('#tupBtn').removeAttr("disabled", true);
			},6000);
		}
		else{
			alert("亲,抽奖次数已用光!");
		}
	});

	//转盘旋转
	function runCup(){
		probability();
		var degValue = 'rotate('+angles+'deg'+')';
		$('#xttblog').css('-o-transform',degValue);           //Opera
		$('#xttblog').css('-ms-transform',degValue);          //IE浏览器
		$('#xttblog').css('-moz-transform',degValue);         //Firefox
		$('#xttblog').css('-webkit-transform',degValue);      //Chrome和Safari
		$('#xttblog').css('transform',degValue);
	}

	//各奖项对应的旋转角度及中奖公告内容
	function probability(){
		//获取随机数
		var num = parseInt(Math.random()*(7 - 0 + 0) + 0);
		//概率
		if ( num == 0 ) {
			angles = 2160 * rotNum + 1800;
			notice = info[0] + info1[0];
		}
		//概率
		else if ( num == 1 ) {
			angles = 2160 * rotNum + 1845;
			notice = info[7] + info1[7];
		}
		//概率
		else if ( num == 2 ) {
			angles = 2160 * rotNum + 1890;
			notice = info[6] + info1[6];
		}
		//概率
		else if ( num == 3 ) {
			angles = 2160 * rotNum + 1935;
			notice = info[5] + info1[5];
		}
		//概率
		else if ( num == 4 ) {
			angles = 2160 * rotNum + 1980;
			notice = info[4] + info1[4];
		}
		//概率
		else if ( num == 5 ) {
			angles = 2160 * rotNum + 2025;
			notice = info[3] + info1[3];
		}
		//概率
		else if ( num == 6 ) {
			angles = 2160 * rotNum + 2070;
			notice = info[2] + info1[2];
		}
		//概率
		else if ( num == 7 ) {
			angles = 2160 * rotNum + 2115;
			notice = info[1] + info1[1];
		}
	}

	//绘制转盘
	function canvasRun(){
		var canvas=document.getElementById('xttblog');
		var canvas01=document.getElementById('xttblog01');
		var canvas03=document.getElementById('xttblog03');
		var canvas02=document.getElementById('xttblog02');
		var ctx=canvas.getContext('2d');
		var ctx1=canvas01.getContext('2d');
		var ctx3=canvas03.getContext('2d');
		var ctx2=canvas02.getContext('2d');
		createCircle();
		createCirText();
		initPoint();
	
		//外圆
		function createCircle(){
	        var startAngle = 0;//扇形的开始弧度
	        var endAngle = 0;//扇形的终止弧度
	        //画一个8等份扇形组成的圆形
	        for (var i = 0; i< 8; i++){
	            startAngle = Math.PI*(i/4-1/8);
	            endAngle = startAngle+Math.PI*(1/4);
	            ctx.save();
	            ctx.beginPath(); 
	            ctx.arc(150,150,100, startAngle, endAngle, false);
	            ctx.lineWidth = 120;
	            if (i%2 == 0) {
	            	ctx.strokeStyle =  color[0];
	            }else{
	            	ctx.strokeStyle =  color[1];
	            }
	            ctx.stroke();
	            ctx.restore();
	        } 
	    }

	    //各奖项
	    function createCirText(){	 
		    ctx.textAlign='start';
		    ctx.textBaseline='middle';
		    ctx.fillStyle = color[3];
		    var step = 2*Math.PI/8;
		    for ( var i = 0; i < 8; i++) {
		    	ctx.save();
		    	ctx.beginPath();
		        ctx.translate(150,150);
		        ctx.rotate(i*step);
		        ctx.font = " 20px Microsoft YaHei";
		        ctx.fillStyle = color[3];
		        ctx.fillText(info[i],-30,-115,60);
		        ctx.font = " 14px Microsoft YaHei";
		        ctx.fillText(info1[i],-30,-95,60);
		        ctx.closePath();
		        ctx.restore();
		    }
		}

		function initPoint(){ 
	        //箭头指针
	        ctx1.beginPath();
	        ctx1.moveTo(100,24);
	        ctx1.lineTo(90,62);
	        ctx1.lineTo(110,62);
	        ctx1.lineTo(100,24);
	        ctx1.fillStyle = color[5];
	        ctx1.fill();
	        ctx1.closePath();
	        //中间小圆
	        ctx3.beginPath();
	        ctx3.arc(100,100,40,0,Math.PI*2,false);
	        ctx3.fillStyle = color[5];
	        ctx3.fill();
	        ctx3.closePath();
	        //小圆文字
	        ctx3.font = "Bold 20px Microsoft YaHei"; 
		    ctx3.textAlign='start';
		    ctx3.textBaseline='middle';
		    ctx3.fillStyle = color[4];
	        ctx3.beginPath();
	        ctx3.fillText('开始',80,90,40);
	        ctx3.fillText('抽奖',80,110,40);
	        ctx3.fill();
	        ctx3.closePath();
	        //中间圆圈
	        ctx2.beginPath();
	        ctx2.arc(75,75,75,0,Math.PI*2,false);
	        ctx2.fillStyle = color[2];
	        ctx2.fill();
	        ctx2.closePath();
		}
	}
});
</script>
</head>
<body>
<div class="xttblog_box">
	<canvas id="xttblog" width="300px" height="300px">抱歉!浏览器不支持。</canvas>
	<canvas id="xttblog01" width="200px" height="200px">抱歉!浏览器不支持。</canvas>
	<canvas id="xttblog03" width="200px" height="200px">抱歉!浏览器不支持。</canvas>
	<canvas id="xttblog02" width="150px" height="150px">抱歉!浏览器不支持。</canvas>
	<button id="tupBtn" class="taoge_btn"></button>
</div>
<!-- 更改系统默认弹窗 -->
<script type="text/javascript">
window.alert = function(str)
{
	var shield = document.createElement("DIV");
	shield.id = "shield";
	shield.style.position = "absolute";
	shield.style.left = "50%";
	shield.style.top = "50%";
	shield.style.width = "280px";
	shield.style.height = "150px";
	shield.style.marginLeft = "-140px";
	shield.style.marginTop = "-110px";
	shield.style.zIndex = "25";
	var alertFram = document.createElement("DIV");
	alertFram.id="alertFram";
	alertFram.style.position = "absolute";
	alertFram.style.width = "280px";
	alertFram.style.height = "150px";
	alertFram.style.left = "50%";
	alertFram.style.top = "50%";
	alertFram.style.marginLeft = "-140px";
	alertFram.style.marginTop = "-110px";
	alertFram.style.textAlign = "center";
	alertFram.style.lineHeight = "150px";
	alertFram.style.zIndex = "300";
	strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
	strHtml += " <li style=\"background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\">[中奖提醒]</li>\n";
	strHtml += " <li style=\"background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">"+str+"</li>\n";
	strHtml += " <li style=\"background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" style=\"width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px\"/></li>\n";
	strHtml += "</ul>\n";
	alertFram.innerHTML = strHtml;
	document.body.appendChild(alertFram);
	document.body.appendChild(shield);
	this.doOk = function(){
		alertFram.style.display = "none";
		shield.style.display = "none";
	}
	alertFram.focus();
	document.body.onselectstart = function(){return false;};
}
</script>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5 Canvas圆盘抽奖应用DEMO演示