首页 新闻 搜索 专区 学院

canvas倒计时转圈动画?

0
悬赏园豆:40 [已解决问题] 解决于 2017-08-08 17:05

请教下大佬们,下面红色箭头指向的地方,每秒转一圈,用canvas应该如何实现,或者说有其他方法做吗?对于canvas小白是真的难。算法还烂......... QAQ

Awu_Fighting的主页 Awu_Fighting | 初学一级 | 园豆:8
提问于:2017-08-08 15:15
< >
分享
最佳答案
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
与阳光握手言和 | 菜鸟二级 |园豆:373 | 2017-08-08 17:04

谢谢大佬,我稍微改下就可以了,感谢。

Awu_Fighting | 园豆:8 (初学一级) | 2017-08-08 17:05

@Awu_Fighting: 客气啦,我不是大佬,正好我之前做过canvas项目,这个是那时候在网上找的

与阳光握手言和 | 园豆:373 (菜鸟二级) | 2017-08-08 17:15

@与阳光握手言和: 哈哈,感谢啦。

Awu_Fighting | 园豆:8 (初学一级) | 2017-08-08 17:16
其他回答(1)
0

http://www.cnblogs.com/li-han/p/5878338.html 

可参考

歆,okay! | 园豆:215 (菜鸟二级) | 2017-08-08 15:19

我的想法是,用canvas动态画圆,然后通过CSS3 的3D旋转实现椭圆,但是旋转后,线特别丑,还有锯齿。所以放弃了,应该可以直接用canvas画椭圆的,但是出于本人数学实在太烂,写不出效果

支持(0) 反对(0) Awu_Fighting | 园豆:8 (初学一级) | 2017-08-08 15:21
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册