HTML5canvas如何实现中奖转盘-创新互联

小编给大家分享一下HTML5 canvas如何实现中奖转盘，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司是一家集网站建设,隆昌企业网站建设,隆昌品牌网站建设,网站定制,隆昌网站建设报价,网络营销,网络优化,隆昌网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

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

HTML5 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如何实现中奖转盘的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站标题：HTML5canvas如何实现中奖转盘-创新互联
当前URL：https://www.cdcxhl.com/article0/cegpio.html

成都网站建设公司_创新互联，为您提供服务器托管、品牌网站建设、小程序开发、营销型网站建设、自适应网站、做网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容