Html5实现抽奖转盘效果

  • 1.实现的基本效果

  • 2.主要的内容

    • html5中canvas标签的使用
    • jQueryRotate.js旋转插件

  • 3.主要html代码


  2. <body>
  3.     <div class="content">
  4.         <div class="wheel">
  5.             <canvas class="item" id="wheelCanvas" width="422px" height="422px"></canvas>
  6.             <img class="pointer" src="images/wheel-pointer.png"/>
  7.         </div>
  8.     </div>
  9.     <div class="tips" >
  10.         <span id="tip">jason</span>
  11.     </div>
  12. </body>
  13. </html>

  • 4.主要的css代码


  2. .content{
  3.     display:block;
  4.     width:95%;
  5.     margin: 30px auto;
  6. }
  8. .content .wheel{
  9.     display:block;
  10.     width:100%;
  11.     position:relative;
  12.     background-image:url(../images/wheel-bg.png);
  13.     background-size:100% 100%;
  14. }
  16. .content .wheel canvas.item{
  17.     width:100%;
  18. }
  20. .content .wheel img.pointer{
  21.     position:absolute;
  22.     width:31.5%;
  23.     height:42.5%;
  24.     left:34.6%;
  25.     top:23%;
  26. }
  28. .tips{
  29.     text-align:center;
  30.     margin:20px 0;
  31.     font:normal 24px 'MicroSoft YaHei';
  32. }

  • 5.核心js代码


  2. /*
  3.  * 渲染转盘
  4.  * */
  5. function drawWheelCanvas(){
  7.     // 获取canvas画板，相当于layer？？
  8.     var canvas = document.getElementById("wheelCanvas");
  9. //    var canvas = ($("#wheelCanvas")).get()[0]; // 注意，jQuery获取的是包装过的对象，不是DOM对象,可以进行转换
  11.     // 计算每块占的角度，弧度制
  12.     var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);
  13.     // 获取上下文
  14.     var ctx=canvas.getContext("2d");
  16.     var canvasW = canvas.width; // 画板的高度
  17.     var canvasH = canvas.height; // 画板的宽度
  18.     //在给定矩形内清空一个矩形
  19.     ctx.clearRect(0,0,canvasW,canvasH);
  21.     //strokeStyle 绘制颜色
  22.     ctx.strokeStyle = "#FFBE04"; // 红色
  23.     //font 画布上文本内容的当前字体属性
  24.     ctx.font = '16px Microsoft YaHei';
  26.     // 注意，开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。
  27.     // 画具体内容
  28.     for(var index = 0 ; index < turnWheel.rewardNames.length ; index++)
  29.     {
  30.         // 当前的角度
  31.         var angle = turnWheel.startAngle + index * baseAngle;
  32.         // 填充颜色
  33.         ctx.fillStyle = turnWheel.colors[index];
  35.         // 开始画内容
  36.         // ---------基本的背景颜色----------
  37.         ctx.beginPath();
  38.         /*
  39.          * 画圆弧，和IOS的Quartz2D类似
  40.          * context.arc(x,y,r,sAngle,eAngle,counterclockwise);
  41.          * x :圆的中心点x
  42.          * y :圆的中心点x
  43.          * sAngle,eAngle :起始角度、结束角度
  44.          * counterclockwise : 绘制方向,可选，False = 顺时针，true = 逆时针
  45.          * */
  46.         ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.outsideRadius, angle, angle + baseAngle, false);
  47.         ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.insideRadius, angle + baseAngle, angle, true);
  48.         ctx.stroke();
  49.         ctx.fill();
  50.         //保存画布的状态，和图形上下文栈类似，后面可以Restore还原状态（坐标还原为当前的0，0），
  51.         ctx.save();
  53.         /*----绘制奖品内容----重点----*/
  54.         // 红色字体
  55.         ctx.fillStyle = "#E5302F";
  56.         var rewardName = turnWheel.rewardNames[index];
  57.         var line_height = 17;
  58.         // translate方法重新映射画布上的 (0,0) 位置
  59.         // context.translate(x,y);
  60.         // 见PPT图片，
  61.         var translateX =  canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * turnWheel.textRadius;
  62.         var translateY =  canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * turnWheel.textRadius;
  63.         ctx.translate(translateX,translateY);
  65.         // rotate方法旋转当前的绘图，因为文字适合当前扇形中心线垂直的！
  66.         // angle，当前扇形自身旋转的角度 +  baseAngle / 2 中心线多旋转的角度  + 垂直的角度90°
  67.         ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);
  69.         /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
  70.         // canvas 的 measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。
  71.         // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色. fillStyle 属性以另一种颜色/渐变来渲染文本
  72.         /*
  73.          * context.fillText(text,x,y,maxWidth);
  74.          * 注意！！！y是文字的最底部的值，并不是top的值！！！
  75.          * */
  76.         if(rewardName.indexOf("M")>0){//查询是否包含字段 流量包
  77.             var rewardNames = rewardName.split("M");
  78.             for(var j = 0; j<rewardNames.length; j++){
  79.                 ctx.font = (j == 0)?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
  80.                 if(j == 0){
  81.                     ctx.fillText(rewardNames[j]+"M", -ctx.measureText(rewardNames[j]+"M").width / 2, j * line_height);
  82.                 }else{
  83.                     ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);
  84.                 }
  85.             }
  86.         }else if(rewardName.indexOf("M") == -1 && rewardName.length>6){//奖品名称长度超过一定范围
  87.             rewardName = rewardName.substring(0,6)+"||"+rewardName.substring(6);
  88.             var rewardNames = rewardName.split("||");
  89.             for(var j = 0; j<rewardNames.length; j++){
  90.                 ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);
  91.             }
  92.         }else{
  93.             //在画布上绘制填色的文本。文本的默认颜色是黑色
  94.             ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0);
  95.         }
  97.         //添加对应图标
  98.         if(rewardName.indexOf("Q币")>0){
  99.             // 注意，这里要等到img加载完成才能绘制
  100.             imgQb.onload=function(){
  101.                 ctx.drawImage(imgQb,-15,10);
  102.             };
  103.             ctx.drawImage(imgQb,-15,10);
  105.         }else if(rewardName.indexOf("谢谢参与")>=0){
  106.             imgSorry.onload=function(){
  107.                 ctx.drawImage(imgSorry,-15,10);
  108.             };
  109.             ctx.drawImage(imgSorry,-15,10);
  110.         }
  111.         //还原画板的状态到上一个save()状态之前
  112.         ctx.restore();
  114.         /*----绘制奖品结束----*/
  116.     }
  117. }

  • 最后

+ 这玩意和IOS里面的Quartz2D技术几乎一样....

+ 详细代码>>>>点击下载>>>>

Html5-Canvas实现简易的抽奖转盘的更多相关文章

  1. 基于 HTML5 Canvas 的简易 2D 3D 编辑器

    不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成 ...

  2. HTML5 canvas 圆盘抽奖

    使用html5 canvas 绘制的圆盘抽奖程序 效果图: 贴上全部代码:  1 <!DOCTYPE html> <html> <head> <meta ch ...

  3. 50代码HTML5 Canvas 3D 编辑器优雅搞定

    1024程序员节刚过,手痒想实现一个html的3d编辑器,看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>,都觉 ...

  4. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  5. HTML5 Canvas圆盘抽奖应用（适用于Vue项目）

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  6. html5 canvas简易版捕鱼达人游戏源码

    插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...

  7. html5 canvas 圆形抽奖的实例

    年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...

  8. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  9. Android实现抽奖转盘

    一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...

随机推荐

  1. HDOJ(HDU) 4847 Wow! Such Doge!(doge字符统计)

    Problem Description Chen, Adrian (November 7, 2013). "Doge Is An Ac- tually Good Internet Meme. ...

  2. HDOJ1253 胜利大逃亡 BFS

    胜利大逃亡 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submiss ...

  3. VS2010编译libjpeg

    环境:win7旗舰版 x64 VS2010 下载源代码下载地址:http://www.ijg.org/,选择windows format file 解压源代码,修改源代码中jconfig.vc为jco ...

  4. 【转】SVN linux命令及 windows相关操作（一）

    从以下博客转载和整理: http://www.cnblogs.com/richcem/archive/2011/01/08/1930823.html http://blog.wpjam.com/m/t ...

  5. django运行django-admin.py无法创建网站

    安装django的步骤: 1.安装python,选择默认安装在c盘即可.设置环境变量path,值添加python的安装路径. 2.下载ez_setup.py,下载地址:http://peak.tele ...

  6. oracle hints

    oracle hints 今天是2013-10-08,对于oracle hint有很多,具体可以参考联机手册: http://docs.oracle.com/cd/E11882_01/server.1 ...

  7. JAVA IO 详解2

    Java 流在处理上分为字符流和字节流.字符流处理的单元为 2 个字节的 Unicode 字符,分别操作字符.字符数组或字符串,而字节流处理单元为 1 个字节,操作字节和字节数组. Java 内用 U ...

  8. RichTextBox 右键显示 ContextMenuTrip 分类： C# 2014-10-16 10:43 337人阅读 评论(0) 收藏

    说明: (1)命名: RichTextBox  -> rtxt1 ContextMenuTrip -> cms1 (2)截图: (3)完整代码: <span style=" ...

  9. Hibernate环境搭建超详细

    前言 环境搭建其实可以简单到导入相关jar包即可. 但是对于学习来说,这个环境搭建的内容还是挺多的,目的是提供一个让我们如何快速学习和掌握类库的学习环境.作为程序猿,学习和使用类库是必须掌握的技能.如 ...

  10. servlet清晰理解

    servlet介绍 Servlet看起来像是通常的Java程序.它是JSP的前身,在MVC架构中担任Controller的角色,即控制层.主要进行数据的处理操作和流程的控制,并将有关结果存储到Java ...