canvas一个简朴粗犷的中奖转盘

2019年8月22日 147次阅读 来源: 李大雷

近来在学canvas做动画，于是就写个转盘练下手。
上个大略的结果图（中心谁人是转的指针，表面的圈是图片，懒得写了哈哈哈）
《canvas一个简朴粗犷的中奖转盘》

代码很简单，都解释了，直接上代码吧，嘤嘤嘤

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');
  //设定画布和宽
  canvas.width=140;
  canvas.height=140;
  var then = Date.now();
  var now;//应用时刻差来掌握转盘最小迁移转变时刻
  var first_deg=0;//用来纪录迁移转变的角度
  var rotate_deg=0;//每次迁移转变的角度，用来完成变速活动
  var end_deg =85;//中奖角度
  var speedUp = true;//推断是不是在加快阶段
  var f;

  // 由于canvas的rotate函数是依据左上角坐标（0,0）来扭转的，所以挪动画布
  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(){

    //轮回挪用，发生动画结果
    f = window.requestAnimationFrame(loop);
    now = Date.now();

    //最先加快迁移转变，转到速率为20就不加快了，至于为何是20，看起来惬意罢了
    if(rotate_deg<=20&&speedUp){
      rotate_deg +=1;
    };

    //2s后最先减速（即最小迁移转变时刻），减速是为了视觉上的雅观
    if(now - then > 2000){

      //假如下面设置的是牢固角度，那这里的最小速率发起为1，由于每次迁移转变角度过大，一圈极能够错过中奖的角度，致使转许多圈。
      if(rotate_deg>=2){
        speedUp = false;
        rotate_deg -=1;
      }
      //设置中奖区间为+-5度（设置牢固角度会让动画有点丢脸）
      if(first_deg%360>=end_deg-5&&first_deg%360<=end_deg+5){
        window.cancelAnimationFrame(f);//住手轮回
        //中奖操纵
      }
    };
    first_deg += rotate_deg;//纪录转过的角度
    draw();//绘制图形
  }
  loop();

末了

如今这个转盘比较大的题目就是，假如中奖区间比较小，那减速后迁移转变的时刻就长一些，最低速率转良久才停下。当区间大的时刻一会儿就停下了，减速结果不明显，视觉上看起来很新鲜。有大佬讲下怎样完成迁移转变时长都一样吗？
代码写得很粗拙，完成要领也是本身刚想了就撸了，能够许多处所没斟酌好，望体谅。

    原文作者：李大雷
    原文地址: https://segmentfault.com/a/1190000015906728
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞