canvas倒计时转圈动画？
0
悬赏园豆：40
[已解决问题]
解决于 2017-08-08 17:05
请教下大佬们，下面红色箭头指向的地方，每秒转一圈，用canvas应该如何实现，或者说有其他方法做吗？对于canvas小白是真的难。算法还烂......... QAQ
最佳答案
1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas实现椭圆运动</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <canvas id="canvas">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas> <script type="text/javascript"> var a=200, b=100, radius=30; time=0;//循环的次数 window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.height=768; canvas.width=1024; var cxt=canvas.getContext('2d'); centerPoint(cxt); arcRoute(cxt,300,300,a,b,radius); setInterval(function(){ arcRoute(cxt,300,300,a,b,radius); }, 70); }; //绘制原点 function centerPoint(cxt){ cxt.fillStyle="black"; cxt.beginPath(); cxt.arc(300,300,10,0,2*Math.PI,true) cxt.closePath(); cxt.fill(); } //椭圆路线绘制 function route(context,x,y,a,b){ var step = (a > b) ? 1 / a : 1 / b; context.beginPath(); context.moveTo(x + a, y); //从椭圆的左端点开始绘制 for (var i = 0; i < 2 * Math.PI; i += step) { context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i)); } context.closePath(); context.stroke(); } //椭圆上小球运动的实现 function arcRoute(context,x,y,a,b,r){ context.clearRect(0,0,1024,768); route(context,x,x,a,b); centerPoint(context); var step = (a > b) ? 1 / a : 1 / b; context.fillStyle="red"; if(time==0){ context.beginPath(); context.arc(x,y,r,0,2*Math.PI,true); context.closePath(); context.fill(); }else{ context.beginPath(); context.arc(x+a*Math.cos(time),y+b*Math.sin(time),r,0,2*Math.PI,true); context.closePath(); context.fill(); } time+=1; } </script> </body> </html>
收获园豆：40
谢谢大佬，我稍微改下就可以了，感谢。
@Awu_Fighting: 客气啦，我不是大佬，正好我之前做过canvas项目，这个是那时候在网上找的
@与阳光握手言和: 哈哈，感谢啦。
其他回答(1)
0
http://www.cnblogs.com/li-han/p/5878338.html
可参考
我的想法是，用canvas动态画圆，然后通过CSS3 的3D旋转实现椭圆，但是旋转后，线特别丑，还有锯齿。所以放弃了，应该可以直接用canvas画椭圆的，但是出于本人数学实在太烂，写不出效果
