一、引言

自学two.js第三方绘图工具库，认识到这是一个非常强大的类似转换器的工具，提供一套固定的接口，可用在各种技术下，包括：Canvas、Svg、WebGL，极大的简化了应用的开发。这里，我使用two.js手册里教的一些方法，做一个小练习，模拟绘制太阳-月亮-地球自转公转的类银河系转动的动画效果。

二、原理

在Two.js中和Canvas、SVG都不同的有这么几个地方：

  • Two.js中所有的旋转都是以自己为中心
  • Two.js中的旋转不会累加
  • Two.js中不使用定时器，使用Two.play()方法，类似于Flash动画（但它的底层是有定时器的，该方法每秒钟调用60次two.update()方法）

三、简单模型

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        svg,canvas{

            background: #ddd;

        }

    </style>

</head>

<body>

    <h3>使用Two.js创建圆形和矩形说明动画原理</h3>

    <div id="box"></div>

    <script src="js/two.js"></script>

    <script>

        //创建一个2D绘图对象

        var two = new Two({

            width:800,

            height:400,

            type:Two.Types.svg

        }).appendTo(box);

        //画一个圆形和矩形——矩形定位点在矩形中心

        var c = two.makeCircle(-200,0,100);

        var r = two.makeRectangle(200,0,200,200);

        //创建小组，平移小组的原点

        var g = two.makeGroup(r,c);

        g.translation.set(400,200);

        g.rotation = 30*Math.PI/180;

        //动画原理：调用two.play()方法

        var deg = 0;

        two.on('update',function(){

            deg += 3;

            g.rotation = deg*Math.PI/180;

        });

        two.play();

    </script>

</body>

</html>

效果：

四、太阳-月亮-地球自转公转

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <script src="js/two.js"></script>

  <style>

    svg {

      background: #222;

    }

  </style>

</head>

<body>

 <div id="container"></div>

 <script>

   var two =new Two({width:600, height: 600}).appendTo(container);

   var sun = two.makeCircle(0,0,100);

   sun.fill = 'red';

   sun.stroke = 'transparent';

   var sunOrbit = two.makeCircle(0,0,200);

   sunOrbit.fill = 'transparent';

   sunOrbit.stroke = '#ccc';

   var earth = two.makeCircle(200, 0, 30);

   earth.fill = 'blue';

   earth.stroke = 'transparent';

   var earthOrbit = two.makeCircle(200, 0, 50);

   earthOrbit.fill = 'transparent';

   earthOrbit.stroke = '#ccc';

   var moon = two.makeCircle(50,0, 5);

   moon.fill = 'gold';

   moon.stroke = 'transparent';

   moon.rotation = 0;

   var moonGroup = two.makeGroup(moon);

   moonGroup.translation.set(200,0);

   var earthGroup = two.makeGroup(earth,earthOrbit,moonGroup);

   var sunGroup = two.makeGroup(sun,sunOrbit,earthGroup);

   sunGroup.translation.set(two.width/2, two.height/2);

   //two.update();

   two.bind('update', function(){

     moonGroup.rotation += 10*Math.PI/180;

     moonGroup.rotation %= 2*Math.PI;

     earthGroup.rotation += 2*Math.PI/180;

     earthGroup.rotation %= 2*Math.PI;

   })

   two.play();

 </script>

</body>

</html>

效果：

注：转载请注明出处

【重点突破】——two.js模拟绘制太阳月亮地球转动的更多相关文章

  1. OpenGL学习笔记 之三 （简单示例 太阳月亮地球）

    #include<glut.h> // 太阳.地球和月亮 // 假设每个月都是30天 // 一年12个月,共是360天 ;//day的变化:从0到359 void myDisplay(vo ...

  2. 【重点突破】——Canvas技术绘制随机改变的验证码

    一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...

  3. 【重点突破】——Canvas技术绘制音乐播放器界面

    一.引言 在用Canvas练习制作了验证码之后,还有一个用Canvas技术很综合的练习——制作音乐播放器.在做这个练习的过程中,还有一个重要的观察点,那就是理解Canvas的一大问题. 二.要求  点 ...

  4. CSS太阳月亮地球三角恋旋转效果

    纯粹玩一下,好像没有什么实际的卵用,but,纯玩买不了上当,纯玩买不了受骗........ 地月旋转的一个css效果,无聊玩玩,可以复制到记事本试试 <!DOCTYPE html>< ...

  5. OpenGL “太阳、地球和月亮”天体运动动画 例子

    http://oulehui.blog.163.com/blog/static/7961469820119186616743/ OpenGL “太阳.地球和月亮”天体运动动画 例子 2011-10-1 ...

  6. WPF太阳、地球、月球运动轨迹模拟

    原文:WPF太阳.地球.月球运动轨迹模拟 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/article/details/ ...

  7. three.js模拟实现太阳系行星体系

    概况如下: 1.SphereGeometry实现自转的太阳: 2.RingGeometry实现太阳系星系的公转轨道: 3.ImageUtils加载球体和各行星贴图: 4.canvas中createRa ...

  8. js模拟抛出球运动

    js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...

  9. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

随机推荐

  1. 在Intellij IDEA中使用Debug

    Debug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生的位置,以及在运行过程中参数的变化.通常我们也可以启用Debug模式来跟踪代码的运行流程去学习三方 ...

  2. PKIX path building failed

    百度这个问题,很多人都说是证书问题.至于是什么证书呢?搞了老半天原来是 /Java/jre/lib/security/cacerts不正确.换了个jdk版本就解决这个问题了. 可靠的jdk1.8下载链 ...

  3. 开源分享 Unity3d客户端与C#分布式服务端游戏框架

    很久之前,在博客园写了一篇文章,<分布式网游server的一些想法语言和平台的选择>,当时就有了用C#做网游服务端的想法.写了个Unity3d客户端分布式服务端框架,最近发布了1.0版本, ...

  4. Mybatis映射文件完整模板参照

    Mybatis映射文件完整模板参照 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE map ...

  5. Ubuntu 14.04 安装LNMP（nginx/1.12.1+php7.1.9+mysql5.7.19）环境

    这篇教程中,我们将讨论怎样在Ubuntu 14.04搭建LNMP环境 1 安装Nginx 首先我们要更新apt源 sudo add-apt-repository ppa:nginx/stable  s ...

  6. 极化码的matlab仿真(2)——编码

    第二篇我们来介绍一下极化码的编码. 首先为了方便进行编码,我们需要进行数组的定义 signal = randi([0,1],1,ST); %信息位比特,随机二进制数 frozen = zeros(1, ...

  7. node.js 89行爬虫爬取智联招聘信息

    写在前面的话, .......写个P,直接上效果图.附上源码地址  github/lonhon ok,正文开始,先列出用到的和require的东西: node.js,这个是必须的 request,然发 ...

  8. JS实现60s倒计时(亲测有效)，及span标签如何使用和禁用onclick事件

    效果如下图:点击按钮出现60秒倒计时,60s内按钮不可用,倒计时到了时间方可再次点击获取. 另外还有一个知识点,只有input 及button这样的表单元素有disbale属性,如何设置是否可用属性的 ...

  9. mysql 索引B-Tree类型对索引使用的生效和失效情况详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt343 当人们谈论索引的时候,如果没有特别指明类型 ,那多半说的是 B-Tre ...

  10. 自制tunnel口建虚拟专网实验

    R1: interface Tunnel12 ip address 192.168.12.1 255.255.255.0 ip ospf 1 area 0 tunnel source 123.123. ...