Canvas绘制星球轨迹移动

视频课堂https://edu.csdn.net/course/play/7621

在开发在线游戏时，绘制动画是非常重要的。本节介绍一个使用Canvas API实现的动画实例——小型太阳系模型，由地球、月球和太阳组成。在漆黑的夜空中，地球围着太阳转、月球围绕地球转.

p（1）定期绘图，也就是每隔一段时间就调用绘图函数进行绘图。动画当时多次绘图实现的，一次绘图只能实现静态图像。

p可以使用setInterval()方法设置一个定时器，语法如下：

setInterval(函数名,时间间隔)

p时间间隔的单位是ms，每经过指定的时间间隔系统都会自动调用指定的函数。

p（2）清除先前绘制的所有图形。物体已经移动开来，可原来的位置上还保留先前绘制的图形，这样当然不行。解决这个问题最简单的方法是使用clearRect方法清除画布中的内容。

p在设计小型太阳系模型动画实例之前需要准备3个图片分别用于表现地球、月球和太阳。本例的画面比较小，因此这3个图片不需要很精美。这里使用sun.png表现太阳、使用eartrh.png表现地球使用moon.png表现月球，图它们保存在images目录下

在 JavaScript 代码中定义 3 个 Image 对象，分别用于显示 sun.png 、 eartrh.png 和 moon.png 。然后定义一个 init () 函数，初始化 Image 对象，并设置定时器，代码如下

本例的背景就是漆黑的夜空，因此简单地画一个黑色的矩形就可以了

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><canvas id="canvas" width="500" height="500"></canvas><script>var sun=new Image();var earth=new Image();var moon=new Image();function init(){sun.src="img/sun.jpg";earth.src="img/earth.jpg";moon.src="img/moon.jpg";setInterval(draw,100);}function draw(){var c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.clearRect(0,0,500,500);ctx.fillStyle='rgba(0,0,0)';ctx.fillRect(0,0,500,500);ctx.save();
//              //3绘制太阳；ctx.drawImage(sun,200,200,50,50);//4.绘制地球的轨道;ctx.strokeStyle='red';ctx.beginPath();ctx.arc(225,225,150,2*Math.PI,false);ctx.stroke();ctx.closePath();}window.addEventListener("load",init(),true);</script></body>
</html>

步骤效果：

Canvas绘制星球轨迹移动相关推荐

HTML5 canvas绘制太阳系各行星(包括月球的公转)
HTML5 canvas绘制太阳系看了好多canvas绘制太阳系行星,他们都忽略了月亮,虽然月亮不是行星,但是绘图少了月亮也就没有挑战性了,今天我就计算了一下月亮的轨迹,然后按照公转的比例画了上 ...
用canvas绘制一个圆形，实现绕着一个中心运动
实现效果使用canvas绘制一个圆形,实现绕着一个中心,轨迹类似于走一个椭圆的轨迹那样路线,并且实现漂浮的效果. 这里只是一个实例Demo,直接运行就可以,下面附上代码: <!doctype ...
android 画布轨迹,Android 多点触控，绘制滑动轨迹和十字光标
这个测试项,要捕捉当前有几个触摸点,当前触摸点坐标,滑动事件在x轴.y轴方向的速度等信息,在触摸时跟随触摸点会出现十字光标,绘制出滑动轨迹. 首先绘制出暗色格子背景,采用了自定义View,较为简单,核 ...
Canvas绘制圆滑曲线
canvas 绘制曲线是一个比较容易实现的逻辑,但是对于签名,或者手写板,大屏会议机等设备原生的Canvas.drawPath(); 要求线条曲率完美,直接使用drawPath显然不能满足需求,这方面 ...
canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
HTML5 canvas绘制雪花飘落
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等.没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Fl ...
python绘制三维轨迹_Python学习（一） —— matplotlib绘制三维轨迹图
在研究SLAM时常常需要对其输出的位姿进行复现以检测算法效果,在ubuntu系统中使用Python可以很好的完成相关的工作. 一. Ubuntu下Python的使用在Ubuntu下使用Python有 ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
canvas绘制圆形
canvas绘制圆形的思路: 1.创建路径 XXX.beginpath(); 2.创建圆形的路径: 3.关闭路径:XXX.closepath(); 路径不关闭也能绘制出图形 4.设定绘制样式. 创建圆 ...

Canvas绘制星球轨迹移动

Canvas绘制星球轨迹移动相关推荐

最新文章

热门文章