Html5-Canvas实现简易的抽奖转盘
Html5实现抽奖转盘效果
1.实现的基本效果
2.主要的内容
- html5中canvas标签的使用
- jQueryRotate.js旋转插件
3.主要html代码
<body>
<div class="content">
<div class="wheel">
<canvas class="item" id="wheelCanvas" width="422px" height="422px"></canvas>
<img class="pointer" src="images/wheel-pointer.png"/>
</div>
</div>
<div class="tips" >
<span id="tip">jason</span>
</div>
</body>
</html>
4.主要的css代码
.content{
display:block;
width:95%;
margin: 30px auto;
}
.content .wheel{
display:block;
width:100%;
position:relative;
background-image:url(../images/wheel-bg.png);
background-size:100% 100%;
}
.content .wheel canvas.item{
width:100%;
}
.content .wheel img.pointer{
position:absolute;
width:31.5%;
height:42.5%;
left:34.6%;
top:23%;
}
.tips{
text-align:center;
margin:20px 0;
font:normal 24px 'MicroSoft YaHei';
}
5.核心js代码
/*
* 渲染转盘
* */
function drawWheelCanvas(){
// 获取canvas画板,相当于layer??
var canvas = document.getElementById("wheelCanvas");
// var canvas = ($("#wheelCanvas")).get()[0]; // 注意,jQuery获取的是包装过的对象,不是DOM对象,可以进行转换
// 计算每块占的角度,弧度制
var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);
// 获取上下文
var ctx=canvas.getContext("2d");
var canvasW = canvas.width; // 画板的高度
var canvasH = canvas.height; // 画板的宽度
//在给定矩形内清空一个矩形
ctx.clearRect(0,0,canvasW,canvasH);
//strokeStyle 绘制颜色
ctx.strokeStyle = "#FFBE04"; // 红色
//font 画布上文本内容的当前字体属性
ctx.font = '16px Microsoft YaHei';
// 注意,开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。
// 画具体内容
for(var index = 0 ; index < turnWheel.rewardNames.length ; index++)
{
// 当前的角度
var angle = turnWheel.startAngle + index * baseAngle;
// 填充颜色
ctx.fillStyle = turnWheel.colors[index];
// 开始画内容
// ---------基本的背景颜色----------
ctx.beginPath();
/*
* 画圆弧,和IOS的Quartz2D类似
* context.arc(x,y,r,sAngle,eAngle,counterclockwise);
* x :圆的中心点x
* y :圆的中心点x
* sAngle,eAngle :起始角度、结束角度
* counterclockwise : 绘制方向,可选,False = 顺时针,true = 逆时针
* */
ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.outsideRadius, angle, angle + baseAngle, false);
ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.insideRadius, angle + baseAngle, angle, true);
ctx.stroke();
ctx.fill();
//保存画布的状态,和图形上下文栈类似,后面可以Restore还原状态(坐标还原为当前的0,0),
ctx.save();
/*----绘制奖品内容----重点----*/
// 红色字体
ctx.fillStyle = "#E5302F";
var rewardName = turnWheel.rewardNames[index];
var line_height = 17;
// translate方法重新映射画布上的 (0,0) 位置
// context.translate(x,y);
// 见PPT图片,
var translateX = canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * turnWheel.textRadius;
var translateY = canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * turnWheel.textRadius;
ctx.translate(translateX,translateY);
// rotate方法旋转当前的绘图,因为文字适合当前扇形中心线垂直的!
// angle,当前扇形自身旋转的角度 + baseAngle / 2 中心线多旋转的角度 + 垂直的角度90°
ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);
/** 下面代码根据奖品类型、奖品名称长度渲染不同效果,如字体、颜色、图片效果。(具体根据实际情况改变) **/
// canvas 的 measureText() 方法返回包含一个对象,该对象包含以像素计的指定字体宽度。
// fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色. fillStyle 属性以另一种颜色/渐变来渲染文本
/*
* context.fillText(text,x,y,maxWidth);
* 注意!!!y是文字的最底部的值,并不是top的值!!!
* */
if(rewardName.indexOf("M")>0){//查询是否包含字段 流量包
var rewardNames = rewardName.split("M");
for(var j = 0; j<rewardNames.length; j++){
ctx.font = (j == 0)?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
if(j == 0){
ctx.fillText(rewardNames[j]+"M", -ctx.measureText(rewardNames[j]+"M").width / 2, j * line_height);
}else{
ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);
}
}
}else if(rewardName.indexOf("M") == -1 && rewardName.length>6){//奖品名称长度超过一定范围
rewardName = rewardName.substring(0,6)+"||"+rewardName.substring(6);
var rewardNames = rewardName.split("||");
for(var j = 0; j<rewardNames.length; j++){
ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);
}
}else{
//在画布上绘制填色的文本。文本的默认颜色是黑色
ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0);
}
//添加对应图标
if(rewardName.indexOf("Q币")>0){
// 注意,这里要等到img加载完成才能绘制
imgQb.onload=function(){
ctx.drawImage(imgQb,-15,10);
};
ctx.drawImage(imgQb,-15,10);
}else if(rewardName.indexOf("谢谢参与")>=0){
imgSorry.onload=function(){
ctx.drawImage(imgSorry,-15,10);
};
ctx.drawImage(imgSorry,-15,10);
}
//还原画板的状态到上一个save()状态之前
ctx.restore();
/*----绘制奖品结束----*/
}
}
最后
+ 这玩意和IOS里面的Quartz2D技术几乎一样....
+ 详细代码>>>>点击下载>>>>
Html5-Canvas实现简易的抽奖转盘的更多相关文章
- 基于 HTML5 Canvas 的简易 2D 3D 编辑器
不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成 ...
- HTML5 canvas 圆盘抽奖
使用html5 canvas 绘制的圆盘抽奖程序 效果图: 贴上全部代码: 1 <!DOCTYPE html> <html> <head> <meta ch ...
- 50代码HTML5 Canvas 3D 编辑器优雅搞定
1024程序员节刚过,手痒想实现一个html的3d编辑器,看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>,都觉 ...
- HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
- HTML5 Canvas圆盘抽奖应用(适用于Vue项目)
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
- html5 canvas 圆形抽奖的实例
年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...
- 7 个顶级的 HTML5 Canvas 动画赏析
HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...
- Android实现抽奖转盘
一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...
随机推荐
- Android学习笔记(六)Fragment的生命周期
在上一篇博文中对Fragment做了简单的介绍,现在再来探讨一下Fragment的生命周期. 一.Fragment的几种状态: 与Activity类似,Fragment也有一下几种状态: · 活动状态 ...
- IOS引用的静态库里包含category文件出现“unrecognized selector”的解决办法
来自链接:http://blog.csdn.net/ccf0703/article/details/8279187 针对静态库工程中的Category,在被其他工程引入的时候,会出现selector ...
- 在Ubuntu中设置中文输入法
在Ubuntu中设置中文输入法 */--> pre { background-color: #2f4f4f;line-height: 1.6; FONT: 10.5pt Consola,&quo ...
- UVa 10400 记忆化搜索
#include<cstdio> #include<cstring> #include<iostream> #include<algorithm> us ...
- lightoj 1021 - Painful Bases 状态压缩
题目链接:http://lightoj.com/volume_showproblem.php?problem=1021 #include<cstring> #include<cstd ...
- MongoDB基础知识 02
MongoDB基础知识 02 6 数据类型 6.1 null : 表示空值或者不存在的字段 {"x":null} 6.2 布尔型 : 布尔类型只有两个值true和false {&q ...
- poj 1679 The Unique MST【次小生成树】
The Unique MST Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 24034 Accepted: 8535 D ...
- 【Android - 进阶】之图片三级缓存的原理及实现
在Android开发中,如果图片过多,而我们又没有对图片进行有效的缓存,就很容易导致OOM(Out Of Memory)错误.因此,图片的缓存是非常重要的,尤其是对图片非常多的应用.现在很多框架都做了 ...
- ReentrantLock与synchronized的差别
总的来说,lock更加灵活. 主要同样点:Lock能完毕synchronized所实现的全部功能 不同: 1.ReentrantLock功能性方面更全面,比方时间锁等候,可中断锁等候,锁投票等,因此更 ...
- XML解析技术研究(一)
摘要:XML作为过去十年中出现的最流行的技术之一,得到了广泛的应用,而其中XML解析技术是XML应用的关键.本文介绍了XML解析技术的研究动向,分析和比较了4种XML解析技术的优劣,并归纳总结了应 ...