canvas学习太阳轨道

最新推荐文章于 2021-06-23 20:16:52 发布

打八阿哥

最新推荐文章于 2021-06-23 20:16:52 发布

阅读量165

点赞数

分类专栏：前端文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_45457760/article/details/115344849

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

原文地址：https://blog.csdn.net/u012468376/article/details/73350998

代码笔记

<body>
<canvas id="can" width="300" height="300" style="background-color: black;"></canvas>
<script>
    function draw(){
        // sun()
        var can = document.getElementById("can");
        if(!can.getContext) return;
        var can = can.getContext("2d")
        can.save()
        // 保存最初的原点位置
        // 方便在后面恢复
        can.clearRect(0,0,300,300)
        // 清除页面
        // 啦啦啦，种太阳
        can.beginPath();
        can.fillStyle = "red"
        can.arc(150,150,20,0,Math.PI*2)
        can.fill()
        // 地球轨道
        can.moveTo(250,150)
        can.strokeStyle = "red"
        can.arc(150,150,100,0,Math.PI*2)
        can.stroke()
        // 地球
        can.translate(150,150)
        let time = new Date()
        can.rotate(2*Math.PI/60*time.getSeconds()+2*Math.PI/60000*time.getMilliseconds())
        // 转动x坐标轴
        // 地球转动的关键
        can.translate(100,0)
        can.beginPath()
        can.fillStyle = "blue"
        can.arc(0,0,10,0,Math.PI*2)
        can.fill()
        // 月球轨道
        can.beginPath()
        can.strokeStyle = "blue"
        can.arc(0,0,40,0,Math.PI*2)
        can.stroke()
        // 月球
        can.rotate(2*Math.PI/60*time.getSeconds()+2*Math.PI/60000*time.getMilliseconds())
        can.translate(40,0)
        can.beginPath()
        can.fillStyle = "white"
        can.arc(0,0,5,0,Math.PI*2)
        can.fill()
        can.restore()
        requestAnimationFrame(draw)
        // 屏幕刷新
    }
    draw()
</script>
</body>