Canvas绘制星球轨迹移动

2025-07-29 03:08:33

Canvas绘制星球轨迹移动在开发在线游戏时，绘制动画是非常重要的。本节介绍一个使用Canvas API实现的动画实例——小型太阳系模型，由地球、月球和太阳组成。在漆黑的夜空中，地球围着太阳转、月球围绕地球转. p （ 1 ）定期绘图，也就是每隔一段时间就调用绘图函数进行绘图。动画当时多次绘图实现的，一次绘图只能实现静态图像。 p 可以使用 setInterval () 方法

Canvas绘制星球轨迹移动

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

p （ 1 ）定期绘图，也就是每隔一段时间就调用绘图函数进行绘图。动画当时多次绘图实现的，一次绘图只能实现静态图像。 p 可以使用 setInterval () 方法设置一个定时器，语法如下：

setInterval(函数名,时间间隔)

p 时间间隔的单位是 ms ，每经过指定的时间间隔系统都会自动调用指定的函数。 p （ 2 ）清除先前绘制的所有图形。物体已经移动开来，可原来的位置上还保留先前绘制的图形，这样当然不行。解决这个问题最简单的方法是使用 clearRect 方法清除画布中的内容。

p 在设计小型太阳系模型动画实例之前需要准备个图片分别用于表现地球、月球和太阳。本例的画面比较小，因此这个图片不需要很精美。这里使用 sun.png 表现太阳、使用 eartrh.png 表现地球使用 moon.png 表现月球，图它们保存在 images 目录下在 JavaScript 代码中定义个 Image 对象，分别用于显示 sun.png 、 eartrh.png 和 moon.png 。然后定义一个 init () 函数，初始化 Image 对象，并设置定时器，代码如下

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

代码语言：javascript代码运行次数：0运行复制

<!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");

        (0,0,500,500);
        ctx.fillStyle='rgba(0,0,0)';
        ctx.fillRect(0,0,500,500);
        ctx.save();
//        //绘制太阳；
        ctx.drawImage(sun,200,200,50,50);
        //4.绘制地球的轨道;
        ctx.strokeStyle='red';
        ctx.beginPath();
        ctx.arc(225,225,150,2*Math.PI,false);
        ctx.stroke();
        ();

      }
      window.addEventListener("load",init(),true);
    </script>
  </body>
</html>

步骤效果：

Canvas绘制星球轨迹移动_drawImage本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2022-0-09，如有侵权请联系 cloudcommunity@tencent 删除模型canvas定时器动画函数

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1255976.html

推荐阅读

留言与评论（共有 17 条评论）

本站网友最新报告	9分钟前发表
p 在设计小型太阳系模型动画实例之前需要准备个图片分别用于表现地球
本站网友国外视频聊天室	14分钟前发表
200
本站网友马鞍山租房信息	15分钟前发表
然后定义一个 init () 函数
本站网友球网2010	23分钟前发表
500
本站网友南京物流公司	27分钟前发表
图它们保存在 images 目录下在 JavaScript 代码中定义个 Image 对象
本站网友租售情报	30分钟前发表
p 可以使用 setInterval () 方法设置一个定时器
本站网友骨折并发症	27分钟前发表
本节介绍一个使用Canvas API实现的动画实例——小型太阳系模型
本站网友鼠标自动	23分钟前发表
本节介绍一个使用Canvas API实现的动画实例——小型太阳系模型
本站网友安卓群发短信	23分钟前发表
100); } function draw(){ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); (0
本站网友鸡胸脯	4分钟前发表
init()
本站网友 gettickcount	1分钟前发表
p 在设计小型太阳系模型动画实例之前需要准备个图片分别用于表现地球
本站网友怀男孩的特征	21分钟前发表
这里使用 sun.png 表现太阳
本站网友吞舌菜	7分钟前发表
100); } function draw(){ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); (0
本站网友宁波印象城	19分钟前发表
每经过指定的时间间隔系统都会自动调用指定的函数
本站网友臻汇园	12分钟前发表
解决这个问题最简单的方法是使用 clearRect 方法清除画布中的内容
本站网友网易轻松一刻	15分钟前发表
也就是每隔一段时间就调用绘图函数进行绘图

Canvas绘制星球轨迹移动