最近在学canvas做动画，于是就写个转盘练下手。
上个简陋的成果图（中间那个是转的指针，外面的圈是图片，懒得写了哈哈哈）
代码很 简单 ，都注释了，直接上代码吧，嘤嘤嘤
ht ML
<body> <canvas id="canvas">您的浏览器不支持canvas</canvas> < img src="./zp. jpg " alt="" id="img"> </body>
css
<style>
# canvas{
pos IT ion: absolute;
left: 230px;
top: 230px;
}
#img{
width: 600px;
h ei ght: 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 s PE edUp = true;//判断 是否 在加速 阶段
var f;
// 因为canvas的rotate函数是根据左上角坐标（0,0）来旋转的，所以移动画布
context.translate(70,70);
function draw(){
context.clearRect(-70, -70, 70, 70);
context.be gin Path();
context.arc(0, 0, 50, Math.PI / 180 * 0, Math.PI / 180 * 360 , true);
context.moveTo(-50,0);
context.l inet o(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& am p; &first_deg%360<=end_deg+5){
window.cancelAnimationFrame(f);//停止循环
//中奖操作
}
};
first_deg += rotate_deg;//记录转过的角度
draw();// 绘制 图形
}
loop();最后
现在这个转盘比 较大 的问题就是，如果中奖区间比较小，那减速后转动的时间就长一些，最低速度转很久才停下。当区间大的时候一下子就停下了，减速效果不明显，视觉上看起来很奇怪。
相关文章推荐：
html5 canvas用来绘制弧形的代码实现
HTML5实现魔方游戏的代码
HTML5结合 互联网 + 实现的3D隧道（附代码）
以上就是HTML5 canvas实现中奖转盘的实例代码的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 HTML5 canvas实现中奖转盘的实例代码 全部内容，希望文章能够帮你解决 HTML5 canvas实现中奖转盘的实例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于HTML5 canvas实现中奖转盘的实例代码的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did204323