html5制作一个转盘,javascript+HTML5 Canvas绘制转盘抽奖

javascript+HTML5 Canvas绘制转盘抽奖

2019-01-04

编程之家

https://www.jb51.cc

编程之家收集整理的这篇文章主要介绍了javascript+HTML5 Canvas绘制转盘抽奖，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

效果图：

点击事件执行代码：

错误，1091用户未登陆或用户数据异常，1092用户剩余积分不足,1093未中奖

hideInput("code",data.code)

if(data.code.toString()=="1090"){

iosalert("系统配置错误")

}elseif(data.code.toString()=="1091"){

iosalert("用户未登陆或用户数据异常")

}elseif(data.code.toString()=="1092"){

iosalert("用户剩余积分不足")

}elseif(data.code.toString()=="1094"){

iosalert("超过每日抽奖次数")

}

else{

var upoint =0;

upoint = parseInt($("#uPoint").html())- parseInt($("#sPoint").html());

$("#uPoint").html(upoint);

if(data.isWin =='true'){

item = getArrayIndex(turnplate.restaraunts,data.name);

rotateFn(item +1,"恭喜获得，"+ turnplate.restaraunts[item]);

}

else{

rotateFn(0,"恭喜获得优胜奖！");

}

}

})

});

上面的代码实现了基本上的逻辑，还需要一个转动转盘的方法来响应服务端传过来的结果：

提示语;

var rotateFn =function(item,txt){

//根据传进来的奖品序号 计算相应的弧度

var angles = item *(360/ turnplate.restaraunts.length)-(360/(turnplate.restaraunts.length *2));

if(angles <270){

angles =270- angles;

}else{

angles =360- angles +270;

}

//强制停止转盘的转动

$('#wheelcanvas').stopRotate();

//调用转动方法，设置转动所需参数和回调函数

$('#wheelcanvas').rotate({

//起始角度

angle:0,//转动角度 +1800是为了多转几圈

animateTo: angles +1800,duration:8000,callback:function(){

iosSuccess(txt);

turnplate.bRotate =!turnplate.bRotate;

if($("#code").val()!="1093"){

delayLoad(getHttpPrefix +"graphicdetails.html?lukyid="+ $("#code").val())

}

}

});

};

好了 主要的功能代码都已分享完毕了，还有些工具方法不理解的，可以留言 我会补充进去的。

总结canvas是html5很强大的一张王牌，可以实现许多绚丽的效果，希望本文可以帮到一些正在学习使用canvas的朋友们。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！