基于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()函数来初始化抽奖转盘。然后监听按钮的鼠标点击事件,当用户点击了抽奖按钮之后,通过一个定时器来不断的绘制和刷新抽奖转盘。

indow.onload=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").onclick=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); };};

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

来源 jQuery之家



分享给朋友:
您可能感兴趣的文章:
随机阅读: