这篇文章主要为大家详细介绍了 javascript HTML5 Canvas 实现圆盘抽奖功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
我们经常参加各种电商优惠活动,比如购买达到一定数额进行抽奖活动,在比如微信抽奖,淘宝抽奖,迅雷赚钱宝圆盘抽奖活动等。这些抽奖活动部分就是由 HTML5 的 Canvas 来制作的,今天就为大家分享一下如何使用 HTML5 的 Canvas 来制作圆盘抽奖功能。老规矩,先看下效果图吧:
再来看看 Canvas 的几个主要 api:
全部源代码如下:
- <!DOCTYPE html>
- <html lang="zh-cn">
- <head>
- <meta charset="UTF-8">
- <title>
- HTML5 Canvas圆盘抽奖应用DEMO演示
- </title>
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
- <style>
- *{padding: 0px;margin: 0px;font-size: 16px;font-family: "Microsoft YaHei";}
- .xttblog_box{width: 300px;height: 300px;margin: 100px auto;position: relative;
- } .xttblog_box canvas{position: absolute;} #xttblog{background-color: white;border-radius:
- 100%;} #xttblog01,#xttblog03{left: 50px;top: 50px;z-index: 30;} #xttblog02{left:
- 75px;top: 75px;z-index: 20;} #xttblog{-o-transform: transform 6s;-ms-transform:
- transform 6s;-moz-transform: transform 6s; -webkit-transform: transform
- 6s;transition: transform 6s;-o-transform-origin: 50% 50%; -ms-transform-origin:
- 50% 50%;-moz-transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%;
- transform-origin: 50% 50%;} .taoge_btn{width: 60px;height: 60px;left: 120px;top:
- 120px;border-radius: 100%; position: absolute;cursor: pointer;border: none;background:
- transparent; outline: none;z-index: 40;}
- </style>
- <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js">
- </script>
- <script>
- $(document).ready(function() {
- //旋转角度
- var angles;
- //可抽奖次数
- var clickNum = 5;
- //旋转次数
- var rotNum = 0;
- //中奖公告
- var notice = null;
- //转盘初始化
- var color = ["#626262", "#787878", "rgba(0,0,0,0.5)", "#DCC722", "white", "#FF4350"];
- var info = ["谢谢参与", " 1000", " 10", " 500", " 100", " 4999", " 1", " 20"];
- var info1 = ['再接再厉', ' 元', ' 元', ' 淘金币', ' 元', ' 淘金币', ' 元', ' 淘金币'] canvasRun();
- $('#tupBtn').bind('click',
- function() {
- if (clickNum >= 1) {
- //可抽奖次数减一
- clickNum = clickNum - 1;
- //转盘旋转
- runCup();
- //转盘旋转过程"开始抽奖"按钮无法点击
- $('#tupBtn').attr("disabled", true);
- //旋转次数加一
- rotNum = rotNum + 1;
- //"开始抽奖"按钮无法点击恢复点击
- setTimeout(function() {
- alert(notice);
- $('#tupBtn').removeAttr("disabled", true);
- },
- 6000);
- } else {
- alert("亲,抽奖次数已用光!");
- }
- });
- //转盘旋转
- function runCup() {
- probability();
- var degValue = 'rotate(' + angles + 'deg' + ')';
- $('#xttblog').css('-o-transform', degValue); //Opera
- $('#xttblog').css('-ms-transform', degValue); //IE浏览器
- $('#xttblog').css('-moz-transform', degValue); //Firefox
- $('#xttblog').css('-webkit-transform', degValue); //Chrome和Safari
- $('#xttblog').css('transform', degValue);
- }
- //各奖项对应的旋转角度及中奖公告内容
- function probability() {
- //获取随机数
- var num = parseInt(Math.random() * (7 - 0 + 0) + 0);
- //概率
- if (num == 0) {
- angles = 2160 * rotNum + 1800;
- notice = info[0] + info1[0];
- }
- //概率
- else if (num == 1) {
- angles = 2160 * rotNum + 1845;
- notice = info[7] + info1[7];
- }
- //概率
- else if (num == 2) {
- angles = 2160 * rotNum + 1890;
- notice = info[6] + info1[6];
- }
- //概率
- else if (num == 3) {
- angles = 2160 * rotNum + 1935;
- notice = info[5] + info1[5];
- }
- //概率
- else if (num == 4) {
- angles = 2160 * rotNum + 1980;
- notice = info[4] + info1[4];
- }
- //概率
- else if (num == 5) {
- angles = 2160 * rotNum + 2025;
- notice = info[3] + info1[3];
- }
- //概率
- else if (num == 6) {
- angles = 2160 * rotNum + 2070;
- notice = info[2] + info1[2];
- }
- //概率
- else if (num == 7) {
- angles = 2160 * rotNum + 2115;
- notice = info[1] + info1[1];
- }
- }
- //绘制转盘
- function canvasRun() {
- var canvas = document.getElementById('xttblog');
- var canvas01 = document.getElementById('xttblog01');
- var canvas03 = document.getElementById('xttblog03');
- var canvas02 = document.getElementById('xttblog02');
- var ctx = canvas.getContext('2d');
- var ctx1 = canvas01.getContext('2d');
- var ctx3 = canvas03.getContext('2d');
- var ctx2 = canvas02.getContext('2d');
- createCircle();
- createCirText();
- initPoint();
- //外圆
- function createCircle() {
- var startAngle = 0; //扇形的开始弧度
- var endAngle = 0; //扇形的终止弧度
- //画一个8等份扇形组成的圆形
- for (var i = 0; i < 8; i++) {
- startAngle = Math.PI * (i / 4 - 1 / 8);
- endAngle = startAngle + Math.PI * (1 / 4);
- ctx.save();
- ctx.beginPath();
- ctx.arc(150, 150, 100, startAngle, endAngle, false);
- ctx.lineWidth = 120;
- if (i % 2 == 0) {
- ctx.strokeStyle = color[0];
- } else {
- ctx.strokeStyle = color[1];
- }
- ctx.stroke();
- ctx.restore();
- }
- }
- //各奖项
- function createCirText() {
- ctx.textAlign = 'start';
- ctx.textBaseline = 'middle';
- ctx.fillStyle = color[3];
- var step = 2 * Math.PI / 8;
- for (var i = 0; i < 8; i++) {
- ctx.save();
- ctx.beginPath();
- ctx.translate(150, 150);
- ctx.rotate(i * step);
- ctx.font = " 20px Microsoft YaHei";
- ctx.fillStyle = color[3];
- ctx.fillText(info[i], -30, -115, 60);
- ctx.font = " 14px Microsoft YaHei";
- ctx.fillText(info1[i], -30, -95, 60);
- ctx.closePath();
- ctx.restore();
- }
- }
- function initPoint() {
- //箭头指针
- ctx1.beginPath();
- ctx1.moveTo(100, 24);
- ctx1.lineTo(90, 62);
- ctx1.lineTo(110, 62);
- ctx1.lineTo(100, 24);
- ctx1.fillStyle = color[5];
- ctx1.fill();
- ctx1.closePath();
- //中间小圆
- ctx3.beginPath();
- ctx3.arc(100, 100, 40, 0, Math.PI * 2, false);
- ctx3.fillStyle = color[5];
- ctx3.fill();
- ctx3.closePath();
- //小圆文字
- ctx3.font = "Bold 20px Microsoft YaHei";
- ctx3.textAlign = 'start';
- ctx3.textBaseline = 'middle';
- ctx3.fillStyle = color[4];
- ctx3.beginPath();
- ctx3.fillText('开始', 80, 90, 40);
- ctx3.fillText('抽奖', 80, 110, 40);
- ctx3.fill();
- ctx3.closePath();
- //中间圆圈
- ctx2.beginPath();
- ctx2.arc(75, 75, 75, 0, Math.PI * 2, false);
- ctx2.fillStyle = color[2];
- ctx2.fill();
- ctx2.closePath();
- }
- }
- });
- </script>
- </head>
- <body>
- <div class="xttblog_box">
- <canvas id="xttblog" width="300px" height="300px">
- 抱歉!浏览器不支持。
- </canvas>
- <canvas id="xttblog01" width="200px" height="200px">
- 抱歉!浏览器不支持。
- </canvas>
- <canvas id="xttblog03" width="200px" height="200px">
- 抱歉!浏览器不支持。
- </canvas>
- <canvas id="xttblog02" width="150px" height="150px">
- 抱歉!浏览器不支持。
- </canvas>
- <button id="tupBtn" class="taoge_btn">
- </button>
- </div>
- <!-- 更改系统默认弹窗 -->
- <script type="text/javascript">
- window.alert = function(str) {
- var shield = document.createElement("DIV");
- shield.id = "shield";
- shield.style.position = "absolute";
- shield.style.left = "50%";
- shield.style.top = "50%";
- shield.style.width = "280px";
- shield.style.height = "150px";
- shield.style.marginLeft = "-140px";
- shield.style.marginTop = "-110px";
- shield.style.zIndex = "25";
- var alertFram = document.createElement("DIV");
- alertFram.id = "alertFram";
- alertFram.style.position = "absolute";
- alertFram.style.width = "280px";
- alertFram.style.height = "150px";
- alertFram.style.left = "50%";
- alertFram.style.top = "50%";
- alertFram.style.marginLeft = "-140px";
- alertFram.style.marginTop = "-110px";
- alertFram.style.textAlign = "center";
- alertFram.style.lineHeight = "150px";
- alertFram.style.zIndex = "300";
- strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
- strHtml += " <li style=\"background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\">[中奖提醒]</li>\n";
- strHtml += " <li style=\"background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">" + str + "</li>\n";
- strHtml += " <li style=\"background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" style=\"width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px\"/></li>\n";
- strHtml += "</ul>\n";
- alertFram.innerHTML = strHtml;
- document.body.appendChild(alertFram);
- document.body.appendChild(shield);
- this.doOk = function() {
- alertFram.style.display = "none";
- shield.style.display = "none";
- }
- alertFram.focus();
- document.body.onselectstart = function() {
- return false;
- };
- }
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0405/266362.html