canvas 圆盘抽奖应用

最新推荐文章于 2024-04-06 09:40:18 发布

置顶 Mr_xiaoQiao

最新推荐文章于 2024-04-06 09:40:18 发布

阅读量585

点赞数 2

分类专栏： H5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/qq_39919114/article/details/78040764

版权

H5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

近期项目开发一款抽奖活动页面，有需要的请带走，如有不足之处，提出来，感谢各位！

项目特点：一、canvas画图没有任何插件

二、自适应

三、动态创建圆盘份数及文字表述等等先看效果图

最终效果图

话不多说，直接上代码

html部分

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas自适应动态生成圆盘抽奖应用</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/main.js">
</script>
</head>
<body>
	<div class="turnplate_box">
		<!-- 添加背景图 -->
		<div id="turnplate_box"></div>
		<!-- 定位圆盘 -->
		<div class="box">
			<canvas id="myCanvas" width="300px" height="300px">抱歉！浏览器不支持。</canvas>
			<canvas id="myCanvas01" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
			<canvas id="myCanvas03" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
			<canvas id="myCanvas02" width="150px" height="150px">抱歉！浏览器不支持。</canvas>
			<button id="tupBtn" class="turnplatw_btn"></button> 
		</div>	
	</div>
</body>
</html>

css部分

*{
	padding: 0px;
	margin: 0px;
	font-size: 16px;
	font-family: "Microsoft YaHei";
}
.turnplate_box{
	width: 400px;
	height: 400px;
	margin: 100px auto;
	position: relative; 
}
#turnplate_box{
	width:400px;
	height:400px;background:url(../disk1.jpg) no-repeat center center;
	background-size:100% 100%; 
	position: relative;
	border-radius: 100%;
}
.box{
	width:300px;
	height: 300px;
	position: absolute;
	 left: 0px;
	 right: 0px;
	 top: 0px;
	 bottom: 0px;
	 margin:auto;
}
.turnplate_box canvas{
	position: absolute;
}
#myCanvas{
	background-color: white;
	border-radius: 100%;
}
#myCanvas01,#myCanvas03{
	z-index: 30;
}
#myCanvas02{
	z-index: 20;
}
#myCanvas01,#myCanvas03,#myCanvas02,#tupBtn{
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin:auto;
}
#turnplate_box{
    -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%;
}
#myCanvas{
    -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%;
}
.turnplatw_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;
}

js部分

$(document).ready(function(){
	//旋转角度
	var angles;
	//可抽奖次数
	var clickNum = 5;
	//旋转次数
	var rotNum = 0;
	//划分分数
	var X = 8;
	//中奖公告
	var notice = null;
	//转盘初始化
	var color = ["#626262","#787878","rgba(0,0,0,0.5)","#fff","white","#FF4350"];
	var info = ["谢谢参与","一等奖","二等奖","三等奖","四等奖","五等奖","六等奖","七等奖"];
	var info1 = ['再接再厉','1000元','800元','500元','400元','300元','200元','100元']
	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 zsy(){
		var  Width = document.documentElement.clientWidth;
		var  Height = document.documentElement.clientHeight;
		$(".turnplate_box").css({height:Width-20+"px",width:Width-20+"px"});
		$("#turnplate_box").css({height:Width-20+"px",width:Width-20+"px"});
		$(".box").css({height:0.8*Width-20+"px",width:0.8*Width-20+"px"});
		$("#myCanvas").css({height:0.8*Width-20+"px",width:0.8*Width-20+"px"});
		$("#myCanvas01").css({height:0.5*Width+"px",width:0.5*Width+"px"});
		$("#myCanvas03").css({height:0.5*Width+"px",width:0.5*Width+"px"});
		$("#myCanvas02").css({height:0.4*Width+"px",width:0.4*Width+"px"});
		$("#tupBtn").css({height:0.16*Width+"px",width:0.16*Width+"px"});
	}zsy();

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

	//各奖项对应的旋转角度及中奖公告内容
	function probability(){
		//获取随机数
		var num = parseInt(Math.random()*(7 - 0 + 0) + 0);
		if(X-num==8){
			angles = 2160 * rotNum + 1800+360/X*num;
			notice = info[0] + info1[0];
		}else{
			angles = 2160 * rotNum + 1800+360/X*num;
			notice = info[X-num] + info1[X-num];
		}	
	}

	//绘制转盘
	function canvasRun(){
		var canvas=document.getElementById('myCanvas');
		var canvas01=document.getElementById('myCanvas01');
		var canvas03=document.getElementById('myCanvas03');
		var canvas02=document.getElementById('myCanvas02');
		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<X; i++){
	        	//随机背景色
	        	//var backgroundColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
	            //固定背景色
	            var backgroundColor = ["#e1b700","#79bd70","#c963a4","#4c4bca","#5fcbd5","#fa7e04","#b163c9","#ff5443"];
	            startAngle = Math.PI*(i/X*2-1/X)-Math.PI/2;
	            endAngle = startAngle+Math.PI*(1/X*2);
	            ctx.save();
	            ctx.beginPath(); 
	            ctx.arc(150,150,100, startAngle, endAngle, false);
	            ctx.lineWidth = 120;
	         	ctx.strokeStyle = backgroundColor[i];    
	            ctx.stroke();
	            ctx.restore();
	        } 
	    }

	    //各奖项
	    function createCirText(){	 
		    ctx.textAlign='start';
		    ctx.textBaseline='middle';
		    ctx.fillStyle = color[3];
		    var step = 2*Math.PI/X;
		    for ( var i = 0; i < X; 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],-(360/X)/X*(X-2),-115,(360/X)/X*2*(X-2));
		        ctx.font = " 14px Microsoft YaHei";
		        ctx.fillText(info1[i],-(360/X)/X*(X-3),-95,(360/X)/X*2*(X-3));
		        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();
		}
	}
});

Mr_xiaoQiao

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
canvas 圆盘抽奖应用

近期项目开发一款抽奖活动页面，有需要的请带走，如有不足之处，提出来，感谢各位！项目特点：一、canvas画图没有任何插件二、自适应三、动态创建圆盘份数及文字表述等等先看效果图话不多说，直接上代码HTML5 Canvas自适应动态生成圆盘抽奖应用抱歉！浏览器不支持。抱歉！浏览器不支持。抱歉！浏览器不支持。
复制链接

扫一扫