Canvas绘制星球轨迹移动
【摘要】
视频课堂https://edu.csdn.net/course/play/7621
在开发在线游戏时，绘制动画是非常重要的。本节介绍一个使用Canvas API实现的动画实例——小型太阳系模型，由地球、月球和太阳组成。在漆黑的夜空中，地球围着太阳转、月球围绕地球转.
p
（
1
）定期绘图，也就是每隔一段时间就调用绘图函数进...
视频课堂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>
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/78753978
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）