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

   <canvas>您的浏览器不支持canvas</canvas>   @@##@@ 

<style>     #canvas{       position: absolute;       left: 230px;       top: 230px;     }     #img{       width: 600px;       height: 600px;     }   </style>

  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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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><img  alt="HTML5 canvas实现中奖转盘的实例代码" >