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

最后

现在这个转盘比较大的问题就是，如果中奖区间比较小，那减速后转动的时间就长一些，最低速度转很久才停下。当区间大的时候一下子就停下了，减速效果不明显，视觉上看起来很奇怪。

相关文章推荐：

html5 canvas用来绘制弧形的代码实现

HTML5实现魔方游戏的代码

HTML5结合互联网+ 实现的3D隧道（附代码）

以上就是HTML5 canvas实现中奖转盘的实例代码的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！