HTML5轉(zhuǎn)盤代碼可以在網(wǎng)頁上加入一個轉(zhuǎn)盤，可以應(yīng)用于許多游戲、抽獎、活動中。以下是一些常用的HTML5轉(zhuǎn)盤代碼。

<canvas  id="myc" width="300" height="300">
</canvas>
<script>
var pieData = [20, 20, 20, 20, 20];
var pieTit = ['one', 'two', 'three', 'four', 'five'];
var colors = ['#4CAF50', '#E91E63', '#9C27B0', '#2196F3', '#FFEB3B'];
var pieSum = 100;
var pie = function(id, d, title, cs, sum){
var lastend = 0;
var mycan = document.getElementById(id);
var ctx = mycan.getContext("2d");
ctx.lineWidth = 1;
ctx.strokeStyle = "#fff";
for(var i = 0; i< d.length; i++){
var pi = Math.floor(sum*d[i]/100);
ctx.fillStyle = cs[i];
ctx.beginPath();
ctx.moveTo(150,150);
ctx.arc(150, 150, 150, lastend, lastend+
(pi*Math.PI/50),false);
ctx.lineTo(150,150);
ctx.fill();
lastend += pi*Math.PI/50;
ctx.save();
ctx.translate(150,150);
ctx.fillStyle = "#fff";
ctx.font = "bold 20px Arial";
ctx.fillText(title[i],-20,-130);
ctx.restore();
}
}
pie('myc', pieData, pieTit, colors, pieSum);
</script>

這是一個簡單的基于Canvas元素的HTML5轉(zhuǎn)盤代碼，可以將抽獎等游戲嵌入網(wǎng)頁中。

<div id="demo"></div>
<script type="text/javascript">
var s = 1;//速度取值1~10
var prize_random = function(){
var list = ['一等獎', '二等獎', '三等獎', '四等獎', '五等獎', '感謝參與'];
var num = Math.random()*100;
if(num >0 && num<=20){
return [0, list[0]];
} else if( num >20 && num<= 40){
return [60, list[1]];
} else if( num >40 && num<= 60){
return [120, list[2]];
} else if( num >60 && num<= 80){
return [180, list[3]];
} else if( num >80 && num< 100){
return [240, list[4]];
} else {
return false;
}
};
var d = function(){
var demo = document.getElementById('demo');
var random = prize_random();
if(random === false){
alert('網(wǎng)絡(luò)連接錯誤');
} else {
var t = random[0]+360*10;
var o = t%(360/list.length);
var speed = Math.sqrt(2*s*s);
var num = 0;
var v = setInterval(function(){
if(num< speed*7){
t = t+o;
o = ((o-0.2)<0.5)?0.5:(o-0.2);
o< 0.5 ? o = 0.5: o = o ;
demo.style.transform = 'rotate('+t+'deg)';
num = num+Math.sqrt(2*s*s);
} else if(num >= speed*7 && num+speed >speed*14){
o = o-(speed/200);
t = t+o;
demo.style.transform = 'rotate('+t+'deg)';
num = num+speed;
} else if(num >= speed*14 && num< speed*15){
o = o-(speed/200);
t = t+o;
demo.style.transform = 'rotate('+t+'deg)';
num = num+speed;
if(num+speed >= speed*15){
clearInterval(v);
alert(random[1]);
}
} else {
num = num+speed;
o = o-(speed/500);
t = t+o;
demo.style.transform = 'rotate('+t+'deg)';
}
},8);
}
};
</script>

這是基于CSS3和JavaScript的HTML5轉(zhuǎn)盤代碼，可以自由定制轉(zhuǎn)盤的獎項(xiàng)和速度。

以上是常用的HTML5轉(zhuǎn)盤代碼，開發(fā)者可以根據(jù)自己的需求選擇并修改相應(yīng)的代碼。