大转盘html5源码,html5 大转盘
不太会写文章,html5 大转盘 源码以下:javascript
大转盘抽奖代码
var turnplate = {
divID:"item",
Div: null,
restaraunts: [{text:"50M免费流量包",color:"#FFF4D6"},
{text:"10元",color:"#FFFFFF"},
{text:"谢谢参与",color:"#FFF4D6"},
{text:"5元",color:"#FFFFFF"},
{text:"10M免费流量包",color:"#FFF4D6"},
{text:"20M免费流量包",color:"#FFFFFF"},
{text:"20元",color:"#FFF4D6"},
{text:"30M免费流量包",color:"#FFFFFF"},
{text:"100M免费流量包",color:"#FFF4D6"},
{text:"2元",color:"#FFFFFF"}],
outsideRadius: 192, //大转盘外圆的半径
textRadius: 155, //大转盘奖品位置距离圆心的距离
insideRadius: 68, //大转盘内圆的半径
startAngle: 0, //开始角度
bRotate: false, //false:中止;ture:旋转
rotateFn: function (item) {
var txt = this.restaraunts[item - 1].text
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,
animateTo: angles + 1800,
duration: 8000,
callback: function () {
plus.nativeUI.toast('您的抽奖结果是:' + txt + '!');
turnplate.setText('您的抽奖结果是:' + txt + '!');
turnplate.bRotate = !turnplate.bRotate;
}
});
},
setText: function (t) {
this.Div.innerHTML = t;
},
drawRouletteWheel: function () {
this.Div = document.getElementById(this.divID);
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, 240, 240);
//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
ctx.strokeStyle = "#FFBE04";
//font 属性设置或返回画布上文本内容的当前字体属性
ctx.font = '16px 宋体';
for (var i = 0; i < turnplate.restaraunts.length; i++) {
var angle = turnplate.startAngle + i * arc;
ctx.fillStyle = turnplate.restaraunts[i].color;
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].text;
var line_height = 17;
ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
if (text.indexOf("M") > 0) {//流量包
var texts = text.split("M");
for (var j = 0; j < texts.length; j++) {
ctx.font = j == 0 ? 'bold 20px 宋体' : '16px 宋体';
if (j == 0) {
ctx.fillText(texts[j] + "M", -ctx.measureText(texts[j] + "M").width / 2, j * line_height);
} else {
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.length; j++) {
ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
}
} else {
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
}
ctx.restore();
}
}
},
//点击开始抽奖
pointerOnclick: function () {css
var random = Math.floor(Math.random()*9+1);
turnplate.begin(random);html
},
begin: function (num) {
// if (turnplate.bRotate) return;
// turnplate.bRotate = !turnplate.bRotate;
turnplate.rotateFn(num);
turnplate.setText('');
}
};
html5
//
// var info =[{text:"50M免费流量包",color:"#FFF4D6"},
// {text:"10元",color:"#FFFFFF"},
// {text:"谢谢参与",color:"#FFF4D6"},
// {text:"5元",color:"#FFFFFF"},
// {text:"10M免费流量包",color:"#FFF4D6"},
// {text:"20M免费流量包",color:"#FFFFFF"},
// {text:"20元",color:"#FFF4D6"},
// {text:"30M免费流量包",color:"#FFFFFF"},
// {text:"100M免费流量包",color:"#FFF4D6"},
// {text:"2元",color:"#FFFFFF"}];java
window.οnlοad=function(){
turnplate.drawRouletteWheel();
};
canvas
dom
大转盘html5源码,html5 大转盘相关推荐
- 合成大西瓜html源码,合成大西瓜
合成大西瓜 声明,本项目仅帮助大家学习技术及娱乐,切勿将修改后的网站大规模传播及商用,以避免侵权! 最简单的魔改发布『 合成大西瓜 』,配套改图工具,不用改代码,修改配置即可! 有帮助的话,求个大大的 ...
- cocos2dx 圆盘抽奖_cocos2d编写的类似幸运大转盘抽奖源码
压缩包内容概览: cocos2d编写的类似幸运大转盘抽奖源码-帮你选择 ; 随机 ; 程序委托 ; 背高清 ; 背 ipad ; 返回 ; 默认 ; 默认@2x ; 图标-72 ; 图标@2x ; 我 ...
- 100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
- 我的CSDN笔记总索引(阅读量降序,代码自动遍历生成HTML5源码)
Python代码用"命令容器"方法os.system(),调用Linux命令行工具crul获取CSDN博文页面源码,Python内置re正则解析出博文笔记信息,按阅读量降序模块输出 ...
- Python 代码打造小 AI ,罗列博文笔记总索引列表,自动生成“我的博文笔记总索引”博文 HTML5 源码文本
Python 代码打造小 AI ,获取笔记信息,自动阅读量降序编排索引列表,生成 HTML5 源码文本. [学习的细节是欢悦的历程] Python 官网:https://www.python.org/ ...
- 3款动态网页时间时钟HTML5源码
介绍: 3款动态网页时间时钟HTML5源码 网盘下载地址: http://kekewangLuo.cc/H5VLrhVBiis0 图片:
- 仿大逃杀源码_破咒不是您的典型大逃杀
仿大逃杀源码 After getting wrecked in endless matches of Apex Legends and not being able to build at all i ...
- 微信抽奖源码PHP前后台+转盘+数据库完整示例
微信抽奖源码PHP前后台+转盘+数据库完整示例 微信抽奖源码PHP前后台+转盘+数据库完整示例 微信抽奖源码PHP前后台+转盘+数据库完整示例 微信抽奖源码PHP前后台+转盘+数据库完整示例 文件下载 ...
- 实现太阳系行星公转动画实例(CSS+HTML5 源码)
实现太阳系行星公转动画实例(CSS+HTML5 源码) 效果图 源代码(CSS+HTML5) 效果图 源代码(CSS+HTML5) <html> <head> <styl ...
- cocos creator |《合成大西瓜》源码 解读
更多源码请扫码关注公众号 编者荐语: 不辜负每一份热爱 以下文章来源于懒惰的An ,作者懒惰的An 懒惰的An <合成大西瓜>原版开发者,cocos游戏开发小辣鸡,会发一些自己做的游戏源码 ...
最新文章
- 【linux】Valgrind工具集详解(七):Memcheck(内存错误检测器)
- 走近TCP/IP协议
- [UE4]射击和直线追踪
- java.lang包怎么用_java.lang.io包的使用
- I2C总线之(一)---概述
- python哪几种开源框架成为大主流【菜鸟必看】
- 求逆元的两种方法+求逆元的O(n)递推算法
- java生成图片验证码
- MFC中由左键单击模拟左键双击引起的问题
- 弹簧触摸开关原理图_电梯弹簧抱闸调整
- mysqls为node.js而编写的sql语句生成插件 crud for mysql.
- 开启弹窗_PC端广告弹窗拦截
- STL::算法::常见算法(二)
- Nokia Widget 应用开发培训笔记
- 表锁 行锁 页锁 是什么区别
- java中带包的类在命令行中的编译和执行中出现的问题及解决办法
- 配置zigbee模块
- JavaScript 设计模式之-单例模式(Singleton Pattern)
- 计算机中imb二进制数,计算机基础知识总述.doc
- 辉芒微IO单片机FT60F023-RB方案MCU开发
热门文章
- Vue+FusionCharts 动态获取数据生成甘特图
- 手机微信和QQ接收到的文件路径
- 网传的南方某科技大学最新研究成果
- 理查德·克莱德曼钢琴曲全集(梦中的婚礼)
- html页面的结构标记是什么意思,html页面的结构标记是什么
- byte(字节)根据长度转成kb(千字节)和mb(兆字节)
- IO流读取文件拒绝访问
- 【计算机网络】手机连接电脑热点实现上网以及捕包
- 单片机波形发生c语言,51单片机波形发生器程序设计
- 计算机财务管理复利现值的公式,财务管理公式汇总