html5 在线抽奖,HTML5大转盘抽奖特效代码
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({
angle:0,
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;
}else{
angles = 360 - angles + 270;
}
$('#wheelcanvas').stopRotate();
$('#wheelcanvas').rotate({
angle:0,
animateTo:angles+1800,
duration:8000,
callback:function (){
alert(txt);
turnplate.bRotate = !turnplate.bRotate;
}
});
};
$('.pointer').click(function (){
if(turnplate.bRotate)return;
turnplate.bRotate = !turnplate.bRotate;
//获取随机数(奖品个数范围内)
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) {
case 1:
rotateFn(252, turnplate.restaraunts[0]);
break;
case 2:
rotateFn(216, turnplate.restaraunts[1]);
break;
case 3:
rotateFn(180, turnplate.restaraunts[2]);
break;
case 4:
rotateFn(144, turnplate.restaraunts[3]);
break;
case 5:
rotateFn(108, turnplate.restaraunts[4]);
break;
case 6:
rotateFn(72, turnplate.restaraunts[5]);
break;
case 7:
rotateFn(36, turnplate.restaraunts[6]);
break;
case 8:
rotateFn(360, turnplate.restaraunts[7]);
break;
case 9:
rotateFn(324, turnplate.restaraunts[8]);
break;
case 10:
rotateFn(288, turnplate.restaraunts[9]);
break;
} */
console.log(item);
});
});
function rnd(n, m){
var random = Math.floor(Math.random()*(m-n+1)+n);
return random;
}
//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.οnlοad=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.length; i++) {
var angle = turnplate.startAngle + i * arc;
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; j0?'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);
}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; j2, j * line_height);
}
}else{
//在画布上绘制填色的文本。文本的默认颜色是黑色
//measureText()方法返回包含一个对象,该对象包含以像素计的指定字体宽度
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
}
//添加对应图标
if(text.indexOf("闪币")>0){
var img= document.getElementById("shan-img");
img.οnlοad=function(){
ctx.drawImage(img,-15,10);
};
ctx.drawImage(img,-15,10);
}else if(text.indexOf("谢谢参与")>=0){
var img= document.getElementById("sorry-img");
img.οnlοad=function(){
ctx.drawImage(img,-15,10);
};
ctx.drawImage(img,-15,10);
}
//把当前画布返回(调整)到上一个save()状态之前
ctx.restore();
//----绘制奖品结束----
}
}
}
html5 在线抽奖,HTML5大转盘抽奖特效代码相关推荐
- 抽奖动画大转盘抽奖思路与做法
抽奖是各类营销活动中最常见的一种形式,本产品需求大致如下:转盘周围跑马灯交替闪烁,点击抽奖,大转盘旋转,调用接口获取抽奖结果,大转盘指针指向对应的奖品.高保如下图1 2.整体思路 本需求要求跑马灯交替 ...
- Android之九宫格抽奖及大转盘抽奖
一:先来张效果图 二:实现步骤: -------.九宫格抽奖是从后台服务器获取的数据,图片文字以及抽奖选中位置都是后台控制 一:九宫格抽奖 1九宫格抽奖工具类(里面包含网络请求,不需要的可去掉) pa ...
- html 5抽奖特效,利用HTML5实现Canvas大转盘抽奖特效
特效描述:利用HTML5实现 Canvas 大转盘 抽奖特效.利用HTML5实现Canvas大转盘抽奖特效 代码结构 1. 引入JS 2. HTML代码 当前浏览器版本过低,请使用其他浏览器尝试 va ...
- 手机抽奖页面代码html,html5大转盘抽奖支持手机转盘抽奖代码
特效描述:html5 大转盘抽奖 支持手机 转盘抽奖代码.html5转盘,html5抽奖,手机转盘,手机抽奖,手机转盘抽奖,可配置奖品抽奖. 代码结构 1. 引入CSS 2. 引入JS 3. HTML ...
- html转盘游戏代码,html5 canvas大转盘抽奖提示代码
特效描述:html5 canvas 大转盘抽奖提示.只用canvas做出的转盘及指针,各奖项和分区颜色可随意设置. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 抱歉!浏览器不支持. ...
- h5php大转盘抽奖,html5的非常简单圆形转盘抽奖代码
html5的非常简单圆形转盘抽奖代码 非常简单的html5 canvas实现的圆形转盘抽奖代码,无需jQuery就可以实现的抽奖转盘特效. var fillStyle = ['rgb(255,154, ...
- html转盘游戏,html5大转盘抽奖实例源码(基于vue.js)
[实例简介] [调试步骤] # 安装依赖 npm install # 开启本地服务器localhost:8088 npm run dev # 发布环境 npm run build #然后静待你的浏览器 ...
- PHP jQuery微信大转盘抽奖源代码分享
微信大转盘抽奖-jQuery+PHP实现,发现很多转盘抽奖,都实现了前台部分,大部分都使用了HTML5技术,但是后台自己调整抽奖几率不方便,索性自己收集资料,在一个转盘抽奖的基础上,增加了PHP部分代 ...
- jQuery+PHP实现微信大转盘抽奖 v1.0
微信大转盘抽奖-jQuery+PHP实现,发现很多转盘抽奖,都实现了前台部分,大部分都使用了HTML5技术,但是后台自己调整抽奖几率不方便,索性自己收集资料,在一个转盘抽奖的基础上,增加了PHP部分代 ...
- jquery抽奖转盘java_jquery实现九宫格大转盘抽奖
下面我们来分享一个九宫格抽奖特效 特效说明: 一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置.奖品数量.转动次数.中奖位置参数.(兼容测试:IE7及以上 ...
最新文章
- Python字符串编码坑彻底详细解决 何梁
- from beautifulsoup4 import BeautifulSoup 报错
- hadoop2.2.0 集群安装配置
- Javascript:getElementById()点innerHTML联合用法(对比演示)
- 应用jacob组件造成的内存溢出解决方案(java.lang.OutOfMemoryError: Java heap space)
- java第一阶段面面试题_java基础阶段几个必会面试题
- ERROR 1820 (HY000): You must reset your password
- 查看和设置tomcat内存
- 探讨微软团队开发利器VSTS安装及部署篇
- BP算法的matlab代码学习
- 3 手风琴翻折效果_vue3+typeScript 手风琴(每周一个小组件)
- 数据库学习笔记1-事务 transaction
- Julia : 再谈HDF5 的save 和 load
- 2020MathorCup第一届大数据赛B题Paddle方案
- 吴恩达机器学习笔记一(Machine learning algorithms)
- 软件接口与性能测试,接口测试与性能测试有什么区别?
- BIM设计/工程设计图形工作站硬件配置方案详解
- 软件测试缺陷报告总结
- 你的手机广告被偷了!通过重定向广告窃取个人隐私,攻击者还能进行恶意广告攻击...
- Microsoft Windows PE
热门文章
- 收银机收款机USB通讯接口(341驱动) 可以用于客显 小票打印机
- 计算机游戏软件制作,游戏制作软件,制作游戏的软件
- 怎样将exe打包成服务运行
- 离线ROS API文档(Zeal或Dash)
- Fujitsu(富士通)扫描仪——fi-6130z 无感安装设置
- 兄弟们,以后不能愉快的抽烟
- baidumap vue 判断范围_vue-baidu-map 行政区域划分
- Apache Spark 完全替代传统数仓的技术挑战及实践
- 虚拟机Ubuntut tftp服务不启动,service tftpd-hpa restart 失败的处理
- fullcalendar日历控件知识点集合