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

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

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

 body  canvas id= canvas 您的浏览器不支持canvas /canvas  img src= ./zp.jpg alt= id= img  /body 

 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.fill >
最后
现在这个转盘比较大的问题就是，如果中奖区间比较小，那减速后转动的时间就长一些，最低速度转很久才停下。当区间大的时候一下子就停下了，减速效果不明显，视觉上看起来很奇怪。
相关文章推荐：
html5 canvas用来绘制弧形的代码实现
HTML5实现魔方游戏的代码
HTML5结合互联网+ 实现的3D隧道（附代码）
以上就是HTML5 canvas实现中奖转盘的实例代码的详细内容，其它编程语言        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。