HTML5canvas实现中奖转盘的实例代码

来源：动视网责编：小采时间：2020-11-27 15:04:47

HTML5canvas实现中奖转盘的实例代码

HTML5canvas实现中奖转盘的实例代码:本篇文章给大家带来的内容是关于HTML5 canvas实现中奖转盘的实例代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近在学canvas做动画，于是就写个转盘练下手。上个简陋的成果图（中间那个是转的指针，外面的圈是图片，懒得写了哈哈哈

推荐度：

点击下载本文 文档为doc格式

导读HTML5canvas实现中奖转盘的实例代码:本篇文章给大家带来的内容是关于HTML5 canvas实现中奖转盘的实例代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近在学canvas做动画，于是就写个转盘练下手。上个简陋的成果图（中间那个是转的指针，外面的圈是图片，懒得写了哈哈哈

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

最近在学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();

最后

现在这个转盘比较大的问题就是，如果中奖区间比较小，那减速后转动的时间就长一些，最低速度转很久才停下。当区间大的时候一下子就停下了，减速效果不明显，视觉上看起来很奇怪。