html5大转盘抽奖支持手机转盘抽奖代码 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 17时,
在线演示地址：/jiaoben/433.html
代码片段(2)
1.&[图片] jiaoben3403.jpg&&&&
2.&[代码][JavaScript]代码&&&&
var turnplate={
restaraunts:[],
//大转盘奖品名称
colors:[],
//大转盘奖品区块对应背景颜色
outsideRadius:192,
//大转盘外圆的半径
textRadius:155,
//大转盘奖品位置距离圆心的距离
insideRadius:68,
//大转盘内圆的半径
startAngle:0,
//开始角度
bRotate:false
//false:停止;ture:旋转
$(document).ready(function(){
//动态添加大转盘的奖品与奖品区域背景颜色
turnplate.restaraunts = ["50M免费流量包", "10闪币", "谢谢参与", "5闪币", "10M免费流量包", "20M免费流量包", "20闪币 ", "30M免费流量包", "100M免费流量包", "2闪币"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"];
var rotateTimeOut = function (){
$('#wheelcanvas').rotate({
animateTo:2160,
duration:8000,
callback:function (){
alert('网络超时，请检查您的网络设置！');
//旋转转盘 item:奖品位置; txt：提示语;
var rotateFn = function (item, txt){
var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
if(angles&270){
angles = 270 -
angles = 360 - angles + 270;
$('#wheelcanvas').stopRotate();
$('#wheelcanvas').rotate({
animateTo:angles+1800,
duration:8000,
callback:function (){
alert(txt);
turnplate.bRotate = !turnplate.bR
$('.pointer').click(function (){
if(turnplate.bRotate)
turnplate.bRotate = !turnplate.bR
//获取随机数(奖品个数范围内)
var item = rnd(1,turnplate.restaraunts.length);
//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
rotateFn(item, turnplate.restaraunts[item-1]);
/* switch (item) {
rotateFn(252, turnplate.restaraunts[0]);
rotateFn(216, turnplate.restaraunts[1]);
rotateFn(180, turnplate.restaraunts[2]);
rotateFn(144, turnplate.restaraunts[3]);
rotateFn(108, turnplate.restaraunts[4]);
rotateFn(72, turnplate.restaraunts[5]);
rotateFn(36, turnplate.restaraunts[6]);
rotateFn(360, turnplate.restaraunts[7]);
rotateFn(324, turnplate.restaraunts[8]);
rotateFn(288, turnplate.restaraunts[9]);
console.log(item);
function rnd(n, m){
var random = Math.floor(Math.random()*(m-n+1)+n);
//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload=function(){
drawRouletteWheel();
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
//根据奖品个数计算圆周角度
var arc = Math.PI / (turnplate.restaraunts.length/2);
var ctx = canvas.getContext("2d");
//在给定矩形内清空一个矩形
ctx.clearRect(0,0,422,422);
//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
ctx.strokeStyle = "#FFBE04";
//font 属性设置或返回画布上文本内容的当前字体属性
ctx.font = '16px Microsoft YaHei';
for(var i = 0; i & turnplate.restaraunts. i++) {
var angle = turnplate.startAngle + i *
ctx.fillStyle = turnplate.colors[i];
ctx.beginPath();
//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
//锁画布(为了保存之前的画布状态)
ctx.save();
//----绘制奖品开始----
ctx.fillStyle = "#E5302F";
var text = turnplate.restaraunts[i];
var line_height = 17;
//translate方法重新映射画布上的 (0,0) 位置
ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
//rotate方法旋转当前的绘图
ctx.rotate(angle + arc / 2 + Math.PI / 2);
/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
if(text.indexOf("M")&0){//流量包
var texts = text.split("M");
for(var j = 0; j&texts. j++){
ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
if(j == 0){
ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
}else if(text.indexOf("M") == -1 && text.length&6){//奖品名称长度超过一定范围
text = text.substring(0,6)+"||"+text.substring(6);
var texts = text.split("||");
for(var j = 0; j&texts. j++){
ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
//在画布上绘制填色的文本。文本的默认颜色是黑色
//measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
//添加对应图标
if(text.indexOf("闪币")&0){
var img= document.getElementById("shan-img");
img.onload=function(){
ctx.drawImage(img,-15,10);
ctx.drawImage(img,-15,10);
}else if(text.indexOf("谢谢参与")&=0){
var img= document.getElementById("sorry-img");
img.onload=function(){
ctx.drawImage(img,-15,10);
ctx.drawImage(img,-15,10);
//把当前画布返回（调整）到上一个save()状态之前
ctx.restore();
//----绘制奖品结束----
开源中国-程序员在线工具：
相关的代码(1203)
11回/144856阅
[JavaScript]
83回/104765阅
[JavaScript]
20回/76808阅
[JavaScript]
49回/57175阅
2回/50241阅
[JavaScript]
50回/49363阅
[JavaScript]
13回/45575阅
[JavaScript]
17回/43063阅
[JavaScript]
10回/36685阅
[JavaScript]
11回/35121阅
[JavaScript]
这个转动的时候会遮盖指针，咋解决！
2楼：xioa_bai 发表于
img.onload=function(){&
& &&ctx.drawImage(img,-15,10);&&&&&
这段代码可以去除也没发现有什么影响
3楼：xioa_bai 发表于
引用来自“fangmingcong”的评论这个转动的时候会遮盖指针，咋解决！我试没发现会遮盖现象啊，不知道你改了什么没？
开源从代码分享开始
老鹰大神的其它代码html5大转盘抽奖支持手机转盘抽奖代码 - 代码分享 - 开源中国社区
当前访客身份：游客 [
当前位置：
相关的代码(1203)
擅长语言Top3：
11回/144856阅/4顶/190收藏&
擅长语言Top3：
83回/104765阅/1顶/100收藏&
擅长语言Top3：
20回/76808阅/1顶/56收藏&
擅长语言Top3：
49回/57175阅/3顶/35收藏&
擅长语言Top3：
2回/50241阅/1顶/39收藏&
擅长语言Top3：
50回/49363阅/1顶/95收藏&
擅长语言Top3：
13回/45575阅/1顶/26收藏&
擅长语言Top3：
17回/43063阅/3顶/50收藏&
擅长语言Top3：
10回/36685阅/1顶/61收藏&
擅长语言Top3：
11回/35121阅/1顶/87收藏&
擅长语言Top3：
56回/31895阅/1顶/626收藏&
擅长语言Top3：
37回/30545阅/1顶/105收藏&
擅长语言Top3：
10回/30297阅/1顶/68收藏&
擅长语言Top3：
35回/27177阅/1顶/65收藏&
擅长语言Top3：
30回/26496阅/1顶/158收藏&
擅长语言Top3：
5回/26384阅/1顶/10收藏&
擅长语言Top3：
7回/26367阅/1顶/18收藏&
擅长语言Top3：
2回/26329阅/1顶/5收藏&
擅长语言Top3：
3回/24766阅/1顶/9收藏&
擅长语言Top3：
39回/24441阅/6顶/152收藏&
擅长语言Top3：
12回/24114阅/2顶/44收藏&
擅长语言Top3：
3回/23677阅/2顶/18收藏&
擅长语言Top3：
31回/23165阅/2顶/95收藏&
擅长语言Top3：
20回/23133阅/1顶/27收藏&
擅长语言Top3：
15回/23055阅/3顶/30收藏&
擅长语言Top3：
1回/23116阅/2顶/18收藏&
擅长语言Top3：
4回/22164阅/3顶/46收藏&
擅长语言Top3：
17回/21207阅/1顶/20收藏&
擅长语言Top3：
0回/19942阅/1顶/20收藏&
擅长语言Top3：
35回/18662阅/1顶/77收藏&
开源从代码分享开始知道手机客户端那个大转盘在哪儿抽奖啊。？_百度知道