这是一款非常简单的基于HTML5 canvas的抽奖轮盘特效。该抽奖轮盘中的所有元素都使用canvas代码来生成,可以设置轮盘的旋转速度和衰减速度来控制轮盘的转动效果。
使用方法
HTML结构
该抽奖轮盘的HTML结构使用一个元素和一个用于触发抽奖事件的按钮组成。
开始抽奖
JavaScript
在js代码中,通过一个数组变量来设置有多少个奖项,beginAngle变量是旋转起来时默认开始旋转的度数,度数愈大旋转的初始速度愈大。radio参数是旋转速度衰减系数,它影响旋转时间。outerR参数是轮盘的大小,interR是轮盘内圆的大小。step参数是轮盘转动的步长。
var info=["一等奖","二等奖","三等奖","四等奖","五等奖","六等奖","七等奖","八等奖","九等奖","十等奖"];
var color=[];
var step = 2*Math.PI/10;
var outerR = 150; //轮盘的大小
var interR = 50;//内存空白圆的大小
var beginAngle=50;//旋转起来时默认开始旋转的度数,度数愈大旋转的初始速度愈大
var radio = 0.95;//旋转速度衰减系数,影响旋转时间
接着在页面加载完毕之后,首先通过init()函数和createArrow()函数来初始化抽奖轮盘。然后监听按钮的鼠标点击事件,当用户点击了抽奖按钮之后,通过一个定时器来不断的绘制和刷新抽奖轮盘。
window.οnlοad=function() {
for ( var i = 0; i < 10; i++) {
color.push(getColor());
}
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.translate(250,250);
createArrow(context);
init(context);
document.getElementById("btn").οnclick=function(){
if(t){
return false;
}
var step = beginAngle +Math.random()*10;
var angle = 0;
t = setInterval(function(){
step *=radio;
if(step <= 0.1){
clearInterval(t);
t =null;
var pos = Math.ceil(angle / 36);
var res = info[10-pos];
context.save();
context.beginPath();
context.font="23px 微软雅黑";
context.fillStyle="#f00";
context.textAlign="center";
context.textBaseline="middle";
context.fillText(res,0,0);
context.restore();
}else{
context.clearRect(-250,-250,500,500);
angle+=step;
if(angle > 360){
angle -=360;
}
context.save();
context.beginPath();
context.rotate(angle * Math.PI/180);
init(context);
context.restore();
createArrow(context);
}
},60);
};
};
完整的代码请参考下载文件。