js HTML5 Canvas繪制轉盤抽獎

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js HTML5 Canvas繪制轉盤抽獎

編輯：關於JavaScript

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

上一頁:對js eval()函數的一些見解
下一頁:純css下拉菜單無需js

關於JavaScript

javascript基本包裝類型介紹: 為了便於操作基本類型值，ECMAScript 提供了 3 個特殊的引用類型：Boolean、Numb
Javascript實現檢測客戶端類型代碼封包: 檢測訪問網頁的浏覽器呈現引擎、平台、Windows操作系統、移動設備和游戲系統/** * Autho
輕松創建nodejs服務器（2）：nodejs服務器的構成分析: 緊接上一節，我們來分析一下代碼：第一行請求（require）Node.js自帶的 http 模塊，並

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章