小编给大家分享一下HTML5 canvas如何实现中奖转盘,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联公司是一家集网站建设,隆昌企业网站建设,隆昌品牌网站建设,网站定制,隆昌网站建设报价,网络营销,网络优化,隆昌网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。最近在学canvas做动画,于是就写个转盘练下手。
上个简陋的成果图(中间那个是转的指针,外面的圈是图片,懒得写了哈哈哈)
代码很简单,都注释了,直接上代码吧,嘤嘤嘤
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();
最后
现在这个转盘比较大的问题就是,如果中奖区间比较小,那减速后转动的时间就长一些,最低速度转很久才停下。当区间大的时候一下子就停下了,减速效果不明显,视觉上看起来很奇怪。
以上是HTML5 canvas如何实现中奖转盘的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。