国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

canvas一個簡單粗暴的中獎轉(zhuǎn)盤

NikoManiac / 3317人閱讀

摘要：最近在學做動畫，于是就寫個轉(zhuǎn)盤練下手。設(shè)置中獎區(qū)間為度設(shè)置固定角度會讓動畫有點難看停止循環(huán)中獎操作記錄轉(zhuǎn)過的角度繪制圖形最后現(xiàn)在這個轉(zhuǎn)盤比較大的問題就是，如果中獎區(qū)間比較小，那減速后轉(zhuǎn)動的時間就長一些，最低速度轉(zhuǎn)很久才停下。

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

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

html 

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

  // 因為canvas的rotate函數(shù)是根據(jù)左上角坐標（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();    
  }
// 將運動分為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)動時間），減速是為了視覺上的美觀
    if(now - then > 2000){

      //如果下面設(shè)置的是固定角度，那這里的最小速度建議為1，因為每次轉(zhuǎn)動角度過大，一圈很可能錯過中獎的角度，導致轉(zhuǎn)很多圈。
      if(rotate_deg>=2){
        speedUp = false;
        rotate_deg -=1;
      }
      //設(shè)置中獎區(qū)間為+-5度（設(shè)置固定角度會讓動畫有點難看）
      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)動的時間就長一些，最低速度轉(zhuǎn)很久才停下。當區(qū)間大的時候一下子就停下了，減速效果不明顯，視覺上看起來很奇怪。有大佬講下怎么實現(xiàn)轉(zhuǎn)動時長都一樣嗎？
代碼寫得很粗糙，實現(xiàn)方法也是自己剛想了就擼了，可能很多地方?jīng)]考慮好，望諒解。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113647.html

相關(guān)文章

  • canvas一個簡單粗暴的中獎轉(zhuǎn)盤

    摘要：最近在學做動畫，于是就寫個轉(zhuǎn)盤練下手。設(shè)置中獎區(qū)間為度設(shè)置固定角度會讓動畫有點難看停止循環(huán)中獎操作記錄轉(zhuǎn)過的角度繪制圖形最后現(xiàn)在這個轉(zhuǎn)盤比較大的問題就是，如果中獎區(qū)間比較小，那減速后轉(zhuǎn)動的時間就長一些，最低速度轉(zhuǎn)很久才停下。 最近在學canvas做動畫，于是就寫個轉(zhuǎn)盤練下手。上個簡陋的成果圖（中間那個是轉(zhuǎn)的指針，外面的圈是圖片，懶得寫了哈哈哈）showImg(https://segme...

    DoINsiSt 評論0 收藏0

  • canvas一個簡單粗暴的中獎轉(zhuǎn)盤

    摘要：最近在學做動畫，于是就寫個轉(zhuǎn)盤練下手。設(shè)置中獎區(qū)間為度設(shè)置固定角度會讓動畫有點難看停止循環(huán)中獎操作記錄轉(zhuǎn)過的角度繪制圖形最后現(xiàn)在這個轉(zhuǎn)盤比較大的問題就是，如果中獎區(qū)間比較小，那減速后轉(zhuǎn)動的時間就長一些，最低速度轉(zhuǎn)很久才停下。 最近在學canvas做動畫，于是就寫個轉(zhuǎn)盤練下手。上個簡陋的成果圖（中間那個是轉(zhuǎn)的指針，外面的圈是圖片，懶得寫了哈哈哈）showImg(https://segme...

    luoyibu 評論0 收藏0

  • HTML5 Canvas圓盤抽獎應(yīng)用DEMO

    摘要：圓盤抽獎應(yīng)用頁面圓盤抽獎應(yīng)用演示抱歉瀏覽器不支持。 HTML5 Canvas圓盤抽獎應(yīng)用DEMO html頁面 HTML5 Canvas圓盤抽獎應(yīng)用DEMO演示 抱歉！瀏覽器不支持。 抱歉！瀏覽器不支持。 抱歉！瀏覽器...

    sunsmell 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<