html5 抽奖效果,基于HTML5 canvas的简单抽奖轮盘

这是一款非常简单的基于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);

};

};

完整的代码请参考下载文件。