javascript HTML5 Canvas實(shí)現(xiàn)圓盤抽獎(jiǎng)功能
更新時(shí)間：2016年04月11日 15:54:11 作者：業(yè)余草
這篇文章主要為大家詳細(xì)介紹了javascript HTML5 Canvas實(shí)現(xiàn)圓盤抽獎(jiǎng)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
我們經(jīng)常參加各種電商優(yōu)惠活動(dòng)，比如購買達(dá)到一定數(shù)額進(jìn)行抽獎(jiǎng)活動(dòng)，在比如微信抽獎(jiǎng)，淘寶抽獎(jiǎng)，迅雷賺錢寶圓盤抽獎(jiǎng)活動(dòng)等。這些抽獎(jiǎng)活動(dòng)部分就是由HTML5的Canvas來制作的，今天就為大家分享一下如何使用HTML5的Canvas來制作圓盤抽獎(jiǎng)功能。老規(guī)矩，先看下效果圖吧：
再來看看Canvas的幾個(gè)主要api：
全部源代碼如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas圓盤抽獎(jiǎng)應(yīng)用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(){
//旋轉(zhuǎn)角度
var angles;
//可抽獎(jiǎng)次數(shù)
var clickNum = 5;
//旋轉(zhuǎn)次數(shù)
var rotNum = 0;
//中獎(jiǎng)公告
var notice = null;
//轉(zhuǎn)盤初始化
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) {
//可抽獎(jiǎng)次數(shù)減一
clickNum = clickNum-1;
//轉(zhuǎn)盤旋轉(zhuǎn)
runCup();
//轉(zhuǎn)盤旋轉(zhuǎn)過程“開始抽獎(jiǎng)”按鈕無法點(diǎn)擊
$('#tupBtn').attr("disabled", true);
//旋轉(zhuǎn)次數(shù)加一
rotNum = rotNum + 1;
//“開始抽獎(jiǎng)”按鈕無法點(diǎn)擊恢復(fù)點(diǎn)擊
setTimeout(function(){
alert(notice);
$('#tupBtn').removeAttr("disabled", true);
},6000);
}
else{
alert("親，抽獎(jiǎng)次數(shù)已用光！");
}
});
//轉(zhuǎn)盤旋轉(zhuǎn)
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);
}
//各獎(jiǎng)項(xiàng)對應(yīng)的旋轉(zhuǎn)角度及中獎(jiǎng)公告內(nèi)容
function probability(){
//獲取隨機(jī)數(shù)
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];
}
}
//繪制轉(zhuǎn)盤
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;//扇形的終止弧度
//畫一個(gè)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();
}
}
//各獎(jiǎng)項(xiàng)
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('抽獎(jiǎng)',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>
<!-- 更改系統(tǒng)默認(rèn)彈窗 -->
<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\">[中獎(jiǎng)提醒]</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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
window.addEventListener是JavaScript中用于添加事件監(jiān)聽器的方法,允許在發(fā)生特定事件時(shí)執(zhí)行函數(shù),本文給大家介紹js?window.addEventListener?是什么,感興趣的朋友一起看看吧2024-09-09
詳細(xì)聊聊JavaScript是如何影響DOM樹構(gòu)建的
DOM (Document Object Model) 的全稱是文檔對象模型,它可以以一種獨(dú)立于平臺(tái)和語言的方式訪問和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu),這篇文章主要給大家介紹了關(guān)于JavaScript是如何影響DOM樹構(gòu)建的相關(guān)資料,需要的朋友可以參考下2021-08-08
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦share.js
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦share.js...2006-12-12
使用JavaScriptCore實(shí)現(xiàn)OC和JS交互詳解
JavaScriptCore是webkit的一個(gè)重要組成部分，主要是對JS進(jìn)行解析和提供執(zhí)行環(huán)境。下面這篇文章主要給大家介紹了使用JavaScriptCore實(shí)現(xiàn)OC和JS交互的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-03-03
用Javascript輕松制作一套簡單的抽獎(jiǎng)系統(tǒng)
用Javascript輕松制作一套簡單的抽獎(jiǎng)系統(tǒng)...2006-12-12
JavaScript創(chuàng)建一個(gè)object對象并操作對象屬性的用法
這篇文章主要介紹了JavaScript創(chuàng)建一個(gè)object對象并操作對象屬性的用法,實(shí)例分析了javascript使用object類定義對象及屬性的用法,需要的朋友可以參考下2015-03-03
echarts統(tǒng)計(jì)x軸區(qū)間的數(shù)值實(shí)例代碼詳解
這篇文章主要介紹了echarts統(tǒng)計(jì)x軸區(qū)間的數(shù)值,本文給出了實(shí)現(xiàn)實(shí)例及實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了簡單的JS輪播圖實(shí)現(xiàn)方法，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
在Twitter上的一些有趣的討論中, 我發(fā)現(xiàn)人們對于Web應(yīng)用和站點(diǎn)對javascript的依賴普遍存在一種疑惑. 這種疑惑一直都存在, 而對我而言, 這個(gè)問題隨著瀏覽技術(shù)的飛躍發(fā)展而集中爆發(fā)了2013-10-10
使用JavaScrip模擬實(shí)現(xiàn)仿京東搜索框功能
使用js模擬實(shí)現(xiàn)京東的搜索框，主要用了js中的onfocus(注冊焦點(diǎn)事件)，onblur(失去焦點(diǎn)的事件)；本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-10-10