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

luoyibu 發(fā)布于2019-08-02 11:09 / 2021人閱讀

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

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

代碼很簡(jiǎn)單，都注釋了，直接上代碼吧，嚶嚶嚶

html

css

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

  // 因?yàn)閏anvas的rotate函數(shù)是根據(jù)左上角坐標(biāo)（0,0）來(lái)旋轉(zhuǎn)的，所以移動(dòng)畫布
  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)動(dòng)分為3段，加速，勻速，減速
  function loop(){

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

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

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

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

最后

現(xiàn)在這個(gè)轉(zhuǎn)盤比較大的問題就是，如果中獎(jiǎng)區(qū)間比較小，那減速后轉(zhuǎn)動(dòng)的時(shí)間就長(zhǎng)一些，最低速度轉(zhuǎn)很久才停下。當(dāng)區(qū)間大的時(shí)候一下子就停下了，減速效果不明顯，視覺上看起來(lái)很奇怪。有大佬講下怎么實(shí)現(xiàn)轉(zhuǎn)動(dòng)時(shí)長(zhǎng)都一樣嗎？
代碼寫得很粗糙，實(shí)現(xiàn)方法也是自己剛想了就擼了，可能很多地方?jīng)]考慮好，望諒解。

GPU云服務(wù)器云服務(wù)器簡(jiǎn)單編寫一個(gè)html 您編一個(gè)簡(jiǎn)單點(diǎn)的 html5的canvas 中獎(jiǎng)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52801.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

luoyibu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

ESP8266-NodeMCU項(xiàng)目（三）：ESP8266-NodeMCU+Blinker+紅外模塊（

閱讀 2647·2021-10-08 10:04
python-tkinter（7）實(shí)現(xiàn)各種個(gè)樣的撩妹鼠標(biāo)拖尾

閱讀 2745·2021-09-06 15:02
最全面的水平垂直居中方案與flexbox布局

閱讀 831·2019-08-30 13:50
前端開發(fā)篇——瀏覽器默認(rèn)樣式及css初始化

閱讀 1561·2019-08-30 13:21
CSS 屬性選擇器的深入挖掘

閱讀 2597·2019-08-30 11:15
nginx + 一個(gè)端口部署多個(gè)單頁(yè)應(yīng)用（history模式）

閱讀 2123·2019-08-29 17:19
react-router v4.x 源碼拾遺2

閱讀 1591·2019-08-26 13:55
『多圖警告』手撕排序算法 - 前端進(jìn)階必備

閱讀 1269·2019-08-26 10:15

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章