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技術幾乎一樣....
+ 詳細代碼>>>>點擊下載>>>>