HTML5canvas如何實(shí)現(xiàn)中獎轉(zhuǎn)盤

小編給大家分享一下HTML5 canvas如何實(shí)現(xiàn)中獎轉(zhuǎn)盤，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、武城網(wǎng)站維護(hù)、網(wǎng)站推廣。

最近在學(xué)canvas做動畫，于是就寫個轉(zhuǎn)盤練下手。
上個簡陋的成果圖（中間那個是轉(zhuǎn)的指針，外面的圈是圖片，懶得寫了哈哈哈）

HTML5 canvas如何實(shí)現(xiàn)中獎轉(zhuǎn)盤

代碼很簡單，都注釋了，直接上代碼吧，嚶嚶嚶

html

<body>
  <canvas id="canvas">您的瀏覽器不支持canvas</canvas>
  <img src="./zp.jpg" alt="" id="img">
</body>

css

<style>
    #canvas{
      position: absolute;
      left: 230px;
      top: 230px;
    }
    #img{
      width: 600px;
      height: 600px;
    }
  </style>

js

  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  //設(shè)定畫布和寬
  canvas.width=140;
  canvas.height=140;
  var then = Date.now();
  var now;//利用時(shí)間差來控制轉(zhuǎn)盤最小轉(zhuǎn)動時(shí)間
  var first_deg=0;//用來記錄轉(zhuǎn)動的角度
  var rotate_deg=0;//每次轉(zhuǎn)動的角度，用來實(shí)現(xiàn)變速運(yùn)動
  var end_deg =85;//中獎角度
  var speedUp = true;//判斷是否在加速階段
  var f;

  // 因?yàn)閏anvas的rotate函數(shù)是根據(jù)左上角坐標(biāo)（0,0）來旋轉(zhuǎn)的，所以移動畫布
  context.translate(70,70);
  function draw(){
    context.clearRect(-70, -70, 70, 70);
    context.beginPath();
    context.arc(0, 0, 50, Math.PI / 180 * 0, Math.PI / 180 * 360, true);
    context.moveTo(-50,0);
    context.lineTo(50,0);
    context.lineTo(0,-70);
    context.rotate(rotate_deg*Math.PI/180);
    context.closePath();
    context.fillStyle='red';
    context.fill();    
  }
// 將運(yùn)動分為3段，加速，勻速，減速
  function loop(){

    //循環(huán)調(diào)用，產(chǎn)生動畫效果
    f = window.requestAnimationFrame(loop);
    now = Date.now();

    //開始加速轉(zhuǎn)動，轉(zhuǎn)到速度為20就不加速了，至于為什么是20，看起來舒服而已
    if(rotate_deg<=20&&speedUp){
      rotate_deg +=1;
    };

    //2s后開始減速（即最小轉(zhuǎn)動時(shí)間），減速是為了視覺上的美觀
    if(now - then > 2000){

      //如果下面設(shè)置的是固定角度，那這里的最小速度建議為1，因?yàn)槊看无D(zhuǎn)動角度過大，一圈很可能錯過中獎的角度，導(dǎo)致轉(zhuǎn)很多圈。
      if(rotate_deg>=2){
        speedUp = false;
        rotate_deg -=1;
      }
      //設(shè)置中獎區(qū)間為+-5度（設(shè)置固定角度會讓動畫有點(diǎn)難看）
      if(first_deg%360>=end_deg-5&&first_deg%360<=end_deg+5){
        window.cancelAnimationFrame(f);//停止循環(huán)
        //中獎操作
      }
    };
    first_deg += rotate_deg;//記錄轉(zhuǎn)過的角度
    draw();//繪制圖形
  }
  loop();

最后

現(xiàn)在這個轉(zhuǎn)盤比較大的問題就是，如果中獎區(qū)間比較小，那減速后轉(zhuǎn)動的時(shí)間就長一些，最低速度轉(zhuǎn)很久才停下。當(dāng)區(qū)間大的時(shí)候一下子就停下了，減速效果不明顯，視覺上看起來很奇怪。

以上是HTML5 canvas如何實(shí)現(xiàn)中獎轉(zhuǎn)盤的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：HTML5canvas如何實(shí)現(xiàn)中獎轉(zhuǎn)盤
網(wǎng)站鏈接：http://jinyejixie.com/article44/pggihe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、營銷型網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、品牌網(wǎng)站制作、服務(wù)器托管、App設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

HTML5canvas如何實(shí)現(xiàn)中獎轉(zhuǎn)盤

html

css

js