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实现简易的抽奖转盘的更多相关文章

  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. LOL游戏程序中对一些函数的Hook记录(Win10 x64)

    [PC Hunter Standard][League of Legends.exe-->Ring3 Hook]: 108Hooked Object Hook Address and Locat ...

  2. MongoDB基础知识 01

    MongoDB基础知识  1. 文档  文档是MongoDB中的数据的基本单元,类似于关系型数据库管理系统的行. 文档是键值对的一个有序集.通常包含一个或者多个键值对. 例如: {”greeting& ...

  3. cocoaPods教程

    <#这个不是命令,包括尖括号#> 一.源设置 1. 查看源,终端输入:  sudo gem sources -l 2. 删除已有的源,如:  sudo gem sources --remo ...

  4. android ROM备份和还原，再也不用当心刷到垃圾ROM，而还原不了原有系统

    安卓刷机后如何还原以前ROM 和系统备份,本教程为大家介绍刷机后如何还原到以前的ROM 和系统备份. 很多人,看到了好多新的rom,包括测试版的新rom,心里痒痒的.想刷一刷.尝尝鲜,结果刷完,感觉新 ...

  5. ListView 分类： WinForm 2014-07-18 22:03 289人阅读 评论(0) 收藏

    一.ListView类(转载) 1.常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示:只有在Details视图该属性才有意义. (2) GridLin ...

  6. 听听Matt Rogish说怎么面试程序员

    Google的人力运营高级副总裁Laszlo Bock在一次采访中说Google发现在面试程序员时问智力题完全是浪费时间,Matt Rogish在他的这篇博客How to Interview Prog ...

  7. PIC16F877A最小功能板 - 原理图系列

    一.顶层 主要由port转换.MCU.复位.键盘.晶振和显示等5部分电路组成. 二.模块层 1. port转换电路 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  8. C#系列之值类型和引用类型

    前言 这几天一直在思考这章讨论什么, 在上一章讨论string的时候牵涉到引用类型,那么我们这一章讨论讨论一下,值类型和引用类型. 值类型和引用类型,它们的区别来源于传值方式.有人会认为值类型就存在栈 ...

  9. hdu 2457 DNA repair

    AC自动机+DP.按着自动机跑,(其实是生成新的满足题目要求的串,然后找改变最少的.)但是不能跑到是单词的地方,如果跑到单词的话那么说明改变后的串含有病毒了,不满足题意.然后就是应该怎么跑的问题了,现 ...

  10. MySQL 5.6初始配置调整

    原文链接: What to tune in MySQL 5.6 after installation原文日期: 2013年09月17日翻译日期: 2014年06月01日翻译人员: 铁锚 随着 大量默认 ...