圆周运动

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #myCanvas {
                border: 10px solid cyan;
                background-color: cyan;
            }
        </style>
    </head>

    <body>
        <canvas id="myCanvas" width="600" height="600"></canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.getElementById("myCanvas");
        var context = myCanvas.getContext("2d");
        var deg = Math.PI/180;
        
        function draw (x,y,color) {
            context.beginPath();
            context.fillStyle = color;
            context.arc(x,y,30,0,360*deg,false);
            context.fill()
        }
        context.translate(300,300);
        setInterval(function () {
            context.clearRect(-300,-300,600,600);
            context.rotate(3*deg);
            draw(150,150,"black");
            draw(-150,-150,"white");
        },20)
        
        
        
    </script>

</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作者:杜昭铮 导师:刘艳 郑鹏 袁浩 内容:本幅思维导图画的是高中物理必修二的圆周运动,分别从定义、圆周运动所涉及...
    卡豆豆阅读 4,136评论 1 2
  • 圆周运动的原理 如上图所示,其实圆周运动,就是通过运动的角度deg来求出物体在x轴和y轴上运动的偏移量,分别为ra...
    McRay阅读 5,237评论 0 2
  • - (void)viewDidLoad { [super viewDidLoad]; //圆周运动 _ball= ...
    nothing_c阅读 2,817评论 0 0
  • 毛毛虫有一种天生的习性就是第一只到什么地方去,其余的都会依次跟着走。它们整整齐齐排成一行,后边的一只跟着前面的一只...
    实实在在教语文阅读 3,173评论 0 1
  • 下纳加走出了舱门之后,他直接跳进了海里。P329是一个极昼的环境,海水里泛着淡蓝色的光光,很美。如果不是因为海里的...
    我是之之阅读 3,610评论 10 5