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();

最后

现在这个转盘比较大的问题就是，如果中奖区间比较小，那减速后转动的时间就长一些，最低速度转很久才停下。当区间大的时候一下子就停下了，减速效果不明显，视觉上看起来很奇怪。有大佬讲下怎么实现转动时长都一样吗？
代码写得很粗糙，实现方法也是自己刚想了就撸了，可能很多地方没考虑好，望谅解。

巴特西

canvas一个简单粗暴的中奖转盘

html

css

js

最后

最新文章

热门文章