素材网 素材网

js地区转盘抽奖插件

下载资源()次

阅读次数()次

发布时间:2015-05-30

js地区转盘抽奖插件
分享到:

用法简介:

来源:xw素材网

js地区转盘抽奖插件。
文件引用:

<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>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。