canvas案例———太阳系

本文将结合面向对象和canvas来模拟太阳系

当然有许多参数不太准确，不过重点是如何使用面向对象和canvas实现效果  侧重点要放在重点上

不是很懂面向对象的小伙伴要先看一下相关的文章，面向对象的编程思想需要用到原型链，因此原型链也要复习一下

 

先分析一下

轨道的话用一个循环能画出来了，详情看代码

每个星球都有自己的坐标(x,y)、半径(r)、周期(cycle)、颜色

我们将以上特点放在一个类上，不同的实例传入不同的参数

CSS

        *{padding:0;margin:0;}
        body{
            background-color: black;
            text-align: center;
        }

html

    <canvas id="canvas" width="1000" height="1000"></canvas>

JS

        let can = document.querySelector("#canvas")
        let ctx = can.getContext('2d')

        // 轨道
        function drawOrbit(){
            ctx.strokeStyle = "white