【canvas 太阳系的动画】

模拟太阳系的动画

<!DOCTYPE html>
<html><body><canvas id="canvas" width="300" height="300" style="border:1px solid">Your browser does not support the canvas element.</canvas><script type="text/javascript">var sun = new Image();//创建图像对象1 = 太阳var moon = new Image();//创建图像对象2 = 月球var earth = new Image();//创建图像对象3 = 地球function init(){sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';window.requestAnimationFrame(draw);//动画命令}function draw() {var ctx = document.getElementById('canvas').getContext('2d');ctx.globalCompositeOperation = 'destination-over';//谁先画,谁在上方(覆盖关系: 新图形画在 前一个图形的后面)ctx.clearRect(0,0,300,300); //清空画布,要更新动画, 必须清空画布 clear canvasctx.fillStyle = 'rgba(0,0,0,0.3)';//指定填充颜色ctx.strokeStyle = 'rgba(0,153,255,0.4)';//指定绘线颜色ctx.save();//保存状态 栈1 = 最初状态,原点在(0,0),没有移动过// 画地球 Earthctx.translate(150,150);//把画布原点 从(0,0) 移动到 (150,150)var time = new Date();//获取当前的日期和时间ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );//从具体的日期和时间中提取出秒和毫秒字段,把顺时针旋转角度和 当前时间的 秒和毫秒变化 关联在一起ctx.translate(105,0);//第二次移动原点,(150,150)水平向右移动105,把地球放在 绘线上ctx.fillRect(0,-12,50,24); // 画1个矩形,作为地球图形上的另一半遮盖住,当作阴影 Shadowctx.drawImage(earth,-12,-12);//把地球图形,添加到画布上//画月球 Moonctx.save();//保存当前的状态 栈2ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );//月球旋转角度,和当前时间变换关联在一起ctx.translate(0,28.5);//第三次 移动原点,(150+105,150)下移 28.5 (150+105,150+28.5)ctx.drawImage(moon,-3.5,-3.5);//画月球//画地球旋转轨道ctx.restore();//恢复状态,当前状态=栈2ctx.restore();//恢复状态,当前状态=栈1=最初状态 (原点没有移动过)ctx.beginPath();ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit,关联关系,半径 = 地球相对第二原点(150,150) 向右移动的距离ctx.stroke();//绘线//画太阳  ctx.drawImage(sun,0,0,300,300);window.requestAnimationFrame(draw);//更新动画命令}init();//重新获取图片资源和进行更新动画命令,图片资源不放在这里面,直接更新动画 也可以,效果不变</script></body>
</html>

形成的动图	图形相对关系	原点移动分析

知识拓展:
获取当前日期和时间: new Date()
- Date 对象用于: 处理日期和时间。
- 定义 Date 对象: 通过 new 关键词
  - 以下代码定义了名为 myDate 的 Date 对象：
  - var myDate=new Date() ;
注释：Date 对象自动使用当前的日期和时间作为其初始值。
获取秒: getSeconds() 方法
- 返回秒: getSeconds() 方法可返回时间的秒。
- 语法:dateObject.getSeconds()
- 返回值: 一个整数 ( 0 ~ 59 之间)
  - dateObject 的分钟字段，以本地时间显示。
获取毫秒: getMilliseconds() 方法
- 1秒(s)=1000毫秒(ms)
- getMilliseconds() 方法可返回时间的毫秒。
- 语法: dateObject.getMilliseconds()
- 返回值: 一个整数 (0 ~ 999 之间)
- dateObject 的毫秒字段，以本地时间显示。

原图链接保存:
太阳:
地球:

月球:

参考文档: MDN Canvas教程
感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 O(∩_∩)O哈哈~
转载请注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/90453691

【canvas 太阳系的动画】相关推荐

最简单太阳系H5动画canvas详解零基础可入
最简单太阳系H5动画canvas详解零基础可入最终结果:(实际为动画效果,金星绕轨道转动) 页面准备/html 要使用canvas,需要首先在页面中要绘制的位置放入canvas标签元素,在后期的绘 ...
java 九大行星运行_html5 canvas太阳系九大行星运行动态图代码
特效描述:html5 canvas 太阳系九大行星运行动态图代码.html5 canvas这个动画加上了每个行星的名称,只要鼠标移入目标行星就会显示. 代码结构 1. HTML代码你浏览器不支持 ...
MDN上的Canvas太阳系例子我终于彻底看懂了
来自MDN上的Canvas动画例子–太阳系动画本文将从例子源码入手,带你从我个人角度理解Canvas太阳系动画的实现,并对一些api做出介绍解释,首先说明我也是刚学习的Canvas,有出错的地方还请 ...
7个华丽的基于Canvas的HTML5动画
说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...
html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
基于canvas的骨骼动画
最近学习到了一种关于canvas的骨骼动画,听这个名字就知道他和canvas之前的动画不同,不知道你有没有兴趣了解一下呢? 关于骨骼动画最初是无意间在腾讯团队上看到的,但是由于他官网的教程是在是少之又 ...
php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
canvas 之星空动画
最近看到位博主的博客背景图很是炫酷,查找下资料了解是canvas实现效果,今天就来看看详细解剖下吧. 实现思路首先了解下canvas中的动画原理?canvas中的动画其实是通过不断的重绘来实现动起来 ...
Canvas基础-粒子动画Part2
紧接上一篇文章 Canvas基础-粒子动画Part1 其实这篇早在一个星期之前就应该发了,无奈事情太多,而且我又跑去写微信公众号了. 粒子动起来有了上一篇的基础,我们已经可以获得粒子,并将轮廓显示在 ...
html银河特效编码,html5 canvas银河星系动画特效
特效描述:html5 canvas 银河星系动画特效.html5 canvas绘制闪闪发光移动的银河星系背景动画特效.(上传服务器正常演示,本地无法直接预览) 代码结构 1. 引入JS 2. HTML ...

【canvas 太阳系的动画】

【canvas 太阳系的动画】相关推荐

最新文章

热门文章