资讯专栏INFORMATION COLUMN

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

NikoManiac / 3177人阅读

摘要:最近在学做动画,于是就写个转盘练下手。设置中奖区间为度设置固定角度会让动画有点难看停止循环中奖操作记录转过的角度绘制图形最后现在这个转盘比较大的问题就是,如果中奖区间比较小,那减速后转动的时间就长一些,最低速度转很久才停下。

最近在学canvas做动画,于是就写个转盘练下手。
上个简陋的成果图(中间那个是转的指针,外面的圈是图片,懒得写了哈哈哈)

代码很简单,都注释了,直接上代码吧,嘤嘤嘤

html

  您的浏览器不支持canvas
  
css
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://www.ucloud.cn/yun/113647.html

相关文章

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

    摘要:最近在学做动画,于是就写个转盘练下手。设置中奖区间为度设置固定角度会让动画有点难看停止循环中奖操作记录转过的角度绘制图形最后现在这个转盘比较大的问题就是,如果中奖区间比较小,那减速后转动的时间就长一些,最低速度转很久才停下。 最近在学canvas做动画,于是就写个转盘练下手。上个简陋的成果图(中间那个是转的指针,外面的圈是图片,懒得写了哈哈哈)showImg(https://segme...

    DoINsiSt 评论0 收藏0
  • canvas一个简单粗暴中奖转盘

    摘要:最近在学做动画,于是就写个转盘练下手。设置中奖区间为度设置固定角度会让动画有点难看停止循环中奖操作记录转过的角度绘制图形最后现在这个转盘比较大的问题就是,如果中奖区间比较小,那减速后转动的时间就长一些,最低速度转很久才停下。 最近在学canvas做动画,于是就写个转盘练下手。上个简陋的成果图(中间那个是转的指针,外面的圈是图片,懒得写了哈哈哈)showImg(https://segme...

    luoyibu 评论0 收藏0
  • HTML5 Canvas圆盘抽奖应用DEMO

    摘要:圆盘抽奖应用页面圆盘抽奖应用演示抱歉浏览器不支持。 HTML5 Canvas圆盘抽奖应用DEMO html页面 HTML5 Canvas圆盘抽奖应用DEMO演示 抱歉!浏览器不支持。 抱歉!浏览器不支持。 抱歉!浏览器...

    sunsmell 评论0 收藏0

发表评论

0条评论

NikoManiac

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<