js+html5转盘抽奖代码下载

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js+html5转盘抽奖代码下载的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js+html5转盘抽奖代码下载</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div style="width:620px;margin:20px auto 0 auto;">
  <input type="button" value="开始旋转" onClick="spin();" style="float: left;" />
  <canvas id="wheelcanvas" width="500" height="500"></canvas>
</div>
<script type="text/javascript">
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB","#2E2C75", "#673A7E", "#CC0071", "#F80120","#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];  
var restaraunts = ["北京", "上海", "天津", "南京","杭州", "深圳", "武汉", "济南","重庆", "大连", "合肥", "郑洲"];   
var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;    
var spinArcStart = 10;  
var spinTime = 0;  
var spinTimeTotal = 0;    
var ctx;    
function draw() {    
  drawRouletteWheel();  
}    
function drawRouletteWheel() {    
  var canvas = document.getElementById("wheelcanvas");    
  if (canvas.getContext) {      
	  var outsideRadius = 200;      
	  var textRadius = 160;      
	  var insideRadius = 125;            
	  ctx = canvas.getContext("2d");      
	  ctx.clearRect(0,0,500,500);
	  ctx.strokeStyle = "black";      
	  ctx.lineWidth = 2;            
	  ctx.font = 'bold 12px sans-serif';            
	  for(var i = 0; i < 12; i++) {       
		  var angle = startAngle + i * arc;        
		  ctx.fillStyle = colors[i];                
		  ctx.beginPath();        
		  ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);        
		  ctx.arc(250, 250, insideRadius, angle + arc, angle, true);        
		  ctx.stroke();        
		  ctx.fill();                
		  ctx.save();       
		  ctx.shadowOffsetX = -1;        
		  ctx.shadowOffsetY = -1;        
		  ctx.shadowBlur    = 0;        
		  ctx.shadowColor   = "rgb(220,220,220)";        
		  ctx.fillStyle = "black";        
		  ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);        
		  ctx.rotate(angle + arc / 2 + Math.PI / 2);        
		  var text = restaraunts[i];        
		  ctx.fillText(text, -ctx.measureText(text).width / 2, 0);        
		  ctx.restore();      
		  }             
		  //Arrow
		  ctx.fillStyle = "black";      
		  ctx.beginPath();      
		  ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));      
		  ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));      
		  ctx.lineTo(250 + 4, 250 - (outsideRadius - 5)); 
		  ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));      
		  ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));     
		  ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));      
		  ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));      
		  ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));      
		  ctx.fill();    
		  } 
}    
function spin() {    
	spinAngleStart = Math.random() * 10 + 10;    
	spinTime = 0;    
	spinTimeTotal = Math.random() * 3 + 4 * 1000;   
	rotateWheel();  
}    
function rotateWheel() {    
	spinTime += 30;    
	if(spinTime >= spinTimeTotal) {      
		stopRotateWheel();      
		return;    
	}    
	var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);    
	startAngle += (spinAngle * Math.PI / 180);
	drawRouletteWheel();    spinTimeout = setTimeout('rotateWheel()', 30); 
}    
function stopRotateWheel() {    
	clearTimeout(spinTimeout);    
	var degrees = startAngle * 180 / Math.PI + 90;    
	var arcd = arc * 180 / Math.PI;    
	var index = Math.floor((360 - degrees % 360) / arcd);    ctx.save();
	ctx.font = 'bold 30px sans-serif';    
	var text = restaraunts[index]    
	ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);    ctx.restore();  
}    
function easeOut(t, b, c, d) {    
	var ts = (t/=d)*t;    
	var tc = ts*t;    
	return b+c*(tc + -3*ts + 3*t);  
}    
draw();
</script>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";body,ul,dl,dd,dt,ol,li,p,h1,h2,h3,h4,h5,h6,textarea,form,select,fieldset,table,td,div,input{margin:0;padding:0;-webkit-text-size-adjust:none}
div{text-align:left}
a img{border:0}
body{color:#333;text-align:center;font:12px "宋体";}
ul,ol,li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000;text-decoration:none}

附件:下载该文件资源,减少时间成本(增值服务)