canvas案例———太阳系

谁践踏了优雅 2022-01-23 04:45 434阅读 0赞

本文将结合**面向对象**和**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"
                for( let i = 0; i < 8; i++ ){
                    ctx.beginPath()
                    ctx.arc( 500, 500, (i+1)*50, 0, 2*Math.PI, false )
                    ctx.stroke()
                }
            }
    
            // 各星球的类
            function Stars( x, y, r, cycle, sColor, eColor ) {
                // x, y 坐标  cycle 周期 sColor eColor 开始/结束颜色
                Object.assign( this, {x, y, r, cycle, sColor, eColor} )
                this.time = 0 // 规定每个星球的起始时间
                this.color = null // 星球颜色初始化
                this.draw = function () {
                    ctx.save()
    
                    // 坐标和公转速度
                    ctx.translate( 500, 500)
                    ctx.rotate( this.time * ( 360 / this.cycle ) * Math.PI / 180 )
    
                    // 绘制每个星球的坐标、半径
                    ctx.beginPath()
                    ctx.arc( this.x, this.y, r, 0, 2 * Math.PI, false )
    
                    // 颜色存储  径向渐变
                    this.color = ctx.createRadialGradient( this.x, this.y, 0, this.x, this.y, this.r )
                    // 颜色填充
                    this.color.addColorStop( 0, this.sColor )
                    this.color.addColorStop( 1, this.eColor )
                    ctx.fillStyle = this.color
                    ctx.fill()
                    ctx.restore()
                    this.time++
                }
            }
    
            // 各星球本体
            function Sun(){
                Stars.call( this, 0, 0, 30, 0, "#f00", "#f00" )
            }
            function Mercury(){
                Stars.call( this, 0, -50, 10, 87, "#ff0", "#00f" )
            }
            function Venus(){
                Stars.call( this, 0, -100, 13, 225, "pink", "purple" )
            }
            function Earth(){
                Stars.call( this, 0, -150, 16, 365, "blue", "yellow" )
            }
            function Mars(){
                Stars.call( this, 0, -200, 20, 687, "#ff0", "#00f" )
            }
            function Jupiter(){
                Stars.call( this, 0, -250, 23, 4333, "white", "#f0f" )
            }
            function Saturn(){
                Stars.call( this, 0, -300, 26, 10760, "#fff", "#0ff" )
            }
            function Uranus(){
                Stars.call( this, 0, -350, 29, 30800, "#aaa", "#987" )
            }
            function Neptune(){
                Stars.call( this, 0, -400, 33, 60152, "#ff0", "#00f" )
            }
    
    
            // 生成实例
            let sun = new Sun()
            let Mer = new Mercury()
            let Ven = new Venus()
            let Ear = new Earth()
            let Mar = new Mars()
            let Jup = new Jupiter()
            let Sat = new Saturn()
            let Ura = new Uranus()
            let Nep = new Neptune()
    
            let starsInstance = [
                sun
                ,Mer
                ,Ven
                ,Ear
                ,Mar
                ,Jup
                ,Sat
                ,Ura
                ,Nep
            ]
    
            // 运动函数
            function move() {
                // 清除上次留下的
                ctx.clearRect( 0, 0, can.width, can.height )
                // 渲染新的
                drawOrbit()
                for( let val of starsInstance ){
                    val.draw()
                    // console.log(val);
                }
            }
            // move()
            setInterval(move, 20)

### 一个瞬间的效果图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70][]

这是一个很简单的面向对象的案例，所以也不说那么多了

希望这篇文章能帮到你~

Wish you godspeed!

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70]: /images/20220123/bb27bab70302432e9d34aa77eadecdd8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，434人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5——太阳系环绕动画

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

╰+攻爆jí腚メ/ 2023年07月20日 12:26/ 0 赞/ 24 阅读

相关 matlab 太阳系仿真,三维仿真太阳系

三维仿真太阳系是一款三维太阳系软件，展示的是3d太阳系模型，是学习的非常好的软件，虽然界面是e文的，有个人教教，对小孩学习太阳系系统知识是非常好的。体积小，但功能强大。界面非常

蔚落/ 2023年01月16日 09:54/ 0 赞/ 200 阅读

相关如何利用Python动态模拟太阳系运转

更多编程教程请到：[菜鸟教程][Link 1] https://www.piaodoo.com/ 友情链接：[好看站][Link 2] http://www.nrso.net

女爷i/ 2022年12月24日 03:57/ 0 赞/ 169 阅读

相关 java 太阳系报告_Java实验报告四

一、实验目的 (1)掌握类的继承方法； (2)变量的继承和覆盖，方法的继承、重载和覆盖实现；二、实验内容 ![9282577088e6d6da0492a08f1d98

喜欢ヅ旅行/ 2022年11月03日 11:21/ 0 赞/ 256 阅读

相关 Canvas学习笔记——马赛克案例

这篇文章要讲的是如何将一张照片变成马赛克的照片，利用`Canvas`中操作像素的方法可实现。马赛克的原理无非就是视觉上把原来的像素大小放大，将若干个小像素组成一个块变成大像素，

忘是亡心i/ 2022年09月05日 00:10/ 0 赞/ 263 阅读

相关 Canvas 时钟小案例

本人属于入门水平大神创意改变生活 ![Center][] [点此查看][Link 1] 代码部分 (function () { f

约定不等于承诺〃/ 2022年06月10日 08:37/ 0 赞/ 286 阅读

相关 ARKit如何将太阳系装进iPhone

本文转自：http://www.code4app.com/blog-847095-1590.html 关注AR/VR也有一段时间了，从一开始微软的HoloLens，谷歌眼镜，

傷城~/ 2022年06月02日 20:14/ 0 赞/ 208 阅读

相关 C++ 实现太阳系行星系统（OpenGL）

基本框架设计一、介绍本次实验将使用 OpenGL GLUT 编写一个简单的太阳系运行系统。实验涉及的知识点 C++ 语言基础基本的 Make

Bertha 。/ 2022年04月06日 07:22/ 0 赞/ 960 阅读

相关 canvas案例———太阳系

本文将结合面向对象和canvas来模拟太阳系当然有许多参数不太准确，不过重点是如何使用面向对象和canvas实现效果侧重点要放在重点上不是很懂面向对象的小伙伴要先看

谁践踏了优雅/ 2022年01月23日 04:45/ 0 赞/ 435 阅读

相关 canvas特效案例-----字母喷泉

今天介绍一下如何用canvas实现字母喷泉效果首先看一下效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

悠悠/ 2022年01月23日 00:33/ 0 赞/ 285 阅读