登录  /  注册
首页 > web前端 > H5教程 > 正文

HTML5 canvas实现中奖转盘的实例代码

不言
发布: 2018-08-07 14:55:38
原创
2624人浏览过

本篇文章给大家带来的内容是关于html5 canvas实现中奖转盘的实例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

1565300737-5b682bdbd48ac_articlex.png

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

html

  <canvas>您的浏览器不支持canvas</canvas>
  <img  alt="HTML5 canvas实现中奖转盘的实例代码" >
登录后复制

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 2000){

      //如果下面设置的是固定角度,那这里的最小速度建议为1,因为每次转动角度过大,一圈很可能错过中奖的角度,导致转很多圈。
      if(rotate_deg&gt;=2){
        speedUp = false;
        rotate_deg -=1;
      }
      //设置中奖区间为+-5度(设置固定角度会让动画有点难看)
      if(first_deg%360&gt;=end_deg-5&amp;&amp;first_deg%360<p><strong>最后</strong></p><p>现在这个转盘比较大的问题就是,如果中奖区间比较小,那减速后转动的时间就长一些,最低速度转很久才停下。当区间大的时候一下子就停下了,减速效果不明显,视觉上看起来很奇怪。</p><p>相关文章推荐:</p><p><a href="http://www.php.cn/html5-tutorial-407703.html" target="_blank" title="html5 canvas用来绘制弧形的代码实现">html5 canvas用来绘制弧形的代码实现</a></p><p class="post-topheader custom- pt0"><a href="http://www.php.cn/html5-tutorial-407589.html" target="_blank" title="HTML5实现魔方游戏的代码">HTML5实现魔方游戏的代码</a></p><p class="mb20"><a href="http://www.php.cn/html5-tutorial-407331.html" target="_blank" title="HTML5结合互联网+ 实现的3D隧道(附代码)">HTML5结合互联网+ 实现的3D隧道(附代码)</a></p>
登录后复制

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

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号