js HTML5 Canvas绘制转盘抽奖
本文实例为大家分享了js转盘抽奖的具体代码，供大家参考，具体内容如下
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技术几乎一样....
详细代码>>>>点击下载
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript+html5 canvas实现本地截图教程
最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一.获取文件,读取文件并生成url 二.
-
javascript+HTML5 Canvas绘制转盘抽奖
之前做过的项目中,有需要抽奖转盘功能的.项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家. 功能需求 1.转盘要美观,转动效果流畅. 2.转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 3.转动动画完成后要有相应提示. 4.获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 1.引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.h
-
javascript html5 canvas实现可拖动省份的中国地图
本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下 1.数据获取 画地图需要省份边界坐标,理论上可以每次都用百度API获取数据并绘图,但为了增加效率,首先将所有坐标都获取下来并存入数据库中. 新建省份数据数组 复制代码 代码如下: var allZoneData = [{'name':'辽宁省','been':'yes','id':'01'},<span style="font-family: Arial, Helvetica, sans-seri
-
JavaScript+html5 canvas实现图片破碎重组动画特效
也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的.但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果.在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎的区域又可以重组还原,视觉效果非常棒. HTML代码 <div style="display:none"> <video id="sourcevid" autoplay="true"
-
JavaScript html5 canvas画布中删除一个块区域的方法
本文实例讲述了html5 canvas画布中删除一个块区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 附:图中,黑色小方块即为删除掉的块区域 具体代码如下: index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>
-
javascript HTML5 canvas实现打砖块游戏
本文实例编写的一个小游戏,基于HTML5中的canvas.游戏主要是小球反弹击打小方块.在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法.代码使用到了一个js脚本库 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块
-
JS HTML图片显示Canvas 压缩功能
简单到延伸 最新需要js 文件压缩图片上传 以前没搞过,新手把学习过程分享 一.选择图片并显示 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head>
-
js HTML5 Canvas绘制转盘抽奖
本文实例为大家分享了js转盘抽奖的具体代码,供大家参考,具体内容如下 1.实现的基本效果 2.主要的内容 •html5中canvas标签的使用 •jQueryRotate.js旋转插件 3.主要html代码 <body> <div class="content"> <div class="wheel"> <canvas class="item" id="wheelCanvas" wi
-
JS+HTML5 canvas绘制验证码示例
本文实例讲述了JS+HTML5 canvas绘制验证码.分享给大家供大家参考,具体如下: css样式: <style> body{ text-align: center; } canvas{ background:#ddd; } </style> HTML部分: body中添加标签canvas: <canvas id="c3"></canvas> js部分: //创建两个变量保存验证码的宽度和高度 var w = 120; var h =
-
js HTML5 canvas绘制图片的方法
本文实例为大家分享了HTML5 canvas绘制图片的具体代码,供大家参考,具体内容如下 demo.js window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANVAS=document.getElementById('mycanvas'); context=CANVAS.getContext('2d'); } function drawImage() { var img
-
JS+html5 canvas实现的简单绘制折线图效果示例
本文实例讲述了JS+html5 canvas实现的简单绘制折线图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>画图</title> <style> #divContainer{ margin-top: 20px; text-align: center; } #cv{ width: 300px;
-
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; heig
-
JavaScript+html5 canvas绘制的小人效果
本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的缩放</tit
-
JavaScript+html5 canvas绘制渐变区域完整实例
本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { border:3px solid gray; } </style> </head&
-
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0p
-
JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS写字板</title> <script src="http://libs.baidu.com/jquery/2.0.0