生活随笔
收集整理的這篇文章主要介紹了
Html5-Canvas实现简易的抽奖转盘
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
###Html5實(shí)現(xiàn)抽獎(jiǎng)轉(zhuǎn)盤效果
2.主要的內(nèi)容
- html5中canvas標(biāo)簽的使用
- jQueryRotate.js旋轉(zhuǎn)插件
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>
.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';
}
/** 渲染轉(zhuǎn)盤* */
function drawWheelCanvas(){// 獲取canvas畫板，相當(dāng)于layer？？var canvas = document.getElementById("wheelCanvas");
// var canvas = ($("#wheelCanvas")).get()[0]; // 注意，jQuery獲取的是包裝過的對(duì)象，不是DOM對(duì)象,可以進(jìn)行轉(zhuǎn)換// 計(jì)算每塊占的角度，弧度制var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);// 獲取上下文var ctx=canvas.getContext("2d");var canvasW = canvas.width; // 畫板的高度var canvasH = canvas.height; // 畫板的寬度//在給定矩形內(nèi)清空一個(gè)矩形ctx.clearRect(0,0,canvasW,canvasH);//strokeStyle 繪制顏色ctx.strokeStyle = "#FFBE04"; // 紅色//font 畫布上文本內(nèi)容的當(dāng)前字體屬性ctx.font = '16px Microsoft YaHei';// 注意，開始畫的位置是從0°角的位置開始畫的。也就是水平向右的方向。// 畫具體內(nèi)容for(var index = 0 ; index < turnWheel.rewardNames.length ; index++){// 當(dāng)前的角度var angle = turnWheel.startAngle + index * baseAngle;// 填充顏色ctx.fillStyle = turnWheel.colors[index];// 開始畫內(nèi)容// ---------基本的背景顏色----------ctx.beginPath();/** 畫圓弧，和IOS的Quartz2D類似* context.arc(x,y,r,sAngle,eAngle,counterclockwise);* x :圓的中心點(diǎn)x* y :圓的中心點(diǎn)x* sAngle,eAngle :起始角度、結(jié)束角度* counterclockwise : 繪制方向,可選，False = 順時(shí)針，true = 逆時(shí)針* */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();//保存畫布的狀態(tài)，和圖形上下文棧類似，后面可以Restore還原狀態(tài)（坐標(biāo)還原為當(dāng)前的0，0），ctx.save();/*----繪制獎(jiǎng)品內(nèi)容----重點(diǎn)----*/// 紅色字體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方法旋轉(zhuǎn)當(dāng)前的繪圖，因?yàn)槲淖诌m合當(dāng)前扇形中心線垂直的！// angle，當(dāng)前扇形自身旋轉(zhuǎn)的角度 + baseAngle / 2 中心線多旋轉(zhuǎn)的角度 + 垂直的角度90°ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);/** 下面代碼根據(jù)獎(jiǎng)品類型、獎(jiǎng)品名稱長(zhǎng)度渲染不同效果，如字體、顏色、圖片效果。(具體根據(jù)實(shí)際情況改變) **/// canvas 的 measureText() 方法返回包含一個(gè)對(duì)象，該對(duì)象包含以像素計(jì)的指定字體寬度。// fillText() 方法在畫布上繪制填色的文本。文本的默認(rèn)顏色是黑色. 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){//獎(jiǎng)品名稱長(zhǎng)度超過一定范圍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{//在畫布上繪制填色的文本。文本的默認(rèn)顏色是黑色ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0);}//添加對(duì)應(yīng)圖標(biāo)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);}//還原畫板的狀態(tài)到上一個(gè)save()狀態(tài)之前ctx.restore();/*----繪制獎(jiǎng)品結(jié)束----*/}
}
最后
- 這玩意和IOS里面的Quartz2D技術(shù)幾乎一樣....
- 詳細(xì)代碼>>>>點(diǎn)擊下載>>>>
轉(zhuǎn)載于:https://www.cnblogs.com/bingwei/p/4830932.html
總結(jié)
以上是生活随笔為你收集整理的Html5-Canvas实现简易的抽奖转盘的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
