js HTML5 Canvas繪制轉(zhuǎn)盤抽獎

更新時間：2020年09月13日 15:35:25 作者：VVJason

這篇文章主要為大家詳細介紹了js HTML5 Canvas繪制轉(zhuǎn)盤抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js轉(zhuǎn)盤抽獎的具體代碼，供大家參考，具體內(nèi)容如下

1.實現(xià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>

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代碼

/*
 * 渲染轉(zhuǎn)盤
 * */
function drawWheelCanvas(){

 // 獲取canvas畫板，相當(dāng)于layer？？
 var canvas = document.getElementById("wheelCanvas");
// var canvas = ($("#wheelCanvas")).get()[0]; // 注意，jQuery獲取的是包裝過的對象，不是DOM對象,可以進行轉(zhuǎn)換

 // 計算每塊占的角度，弧度制
 var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);
 // 獲取上下文
 var ctx=canvas.getContext("2d");

 var canvasW = canvas.width; // 畫板的高度
 var canvasH = canvas.height; // 畫板的寬度
 //在給定矩形內(nèi)清空一個矩形
 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 :圓的中心點x
   * y :圓的中心點x
   * sAngle,eAngle :起始角度、結(jié)束角度
   * counterclockwise : 繪制方向,可選，F(xiàn)alse = 順時針，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();
  //保存畫布的狀態(tài)，和圖形上下文棧類似，后面可以Restore還原狀態(tài)（坐標(biāo)還原為當(dāng)前的0，0），
  ctx.save();

  /*----繪制獎品內(nèi)容----重點----*/
  // 紅色字體
  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)前的繪圖，因為文字適合當(dāng)前扇形中心線垂直的！
  // angle，當(dāng)前扇形自身旋轉(zhuǎn)的角度 + baseAngle / 2 中心線多旋轉(zhuǎn)的角度 + 垂直的角度90°
  ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);

  /** 下面代碼根據(jù)獎品類型、獎品名稱長度渲染不同效果，如字體、顏色、圖片效果。(具體根據(jù)實際情況改變) **/
  // 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);
  }

  //添加對應(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)到上一個save()狀態(tài)之前
  ctx.restore();

  /*----繪制獎品結(jié)束----*/

 }
}

最后
這玩意和IOS里面的Quartz2D技術(shù)幾乎一樣....
詳細代碼>>>>點擊下載

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: