一、引言

自学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. Windows 8 快捷键

    三月份,Kurt Walter 在 Windows团队博客中发表了一篇介绍 Windows 8 和全新快捷键的精彩文章. Windows 8 提供了出色的触摸体验,但在我的台式机上使用了几个月后我还发 ...

  2. MongoDB-python的API手记

    -------------------python调用MongoDB------------------- 1.官方文档:http://api.mongodb.org/python/current/t ...

  3. String.equals()方法

    public boolean equals(Object anObject) {     if (this == anObject) {         return true;     }      ...

  4. Linux-chown命令(1)

    chown  [chang owner]:更改文件的属主,也就是指定文件的拥有者改为另一个指定的用户或组. 命令格式: chown [选项]... [用户][:[组]] 文件... 例子:  sudo ...

  5. hdu 3722 二分图 最优完备匹配 KM算法

    这题只要想到是最优完备匹配就行了: 题意:给出n个字符串,若两两相连,将前一个反置添加到后一个后面,相连的值为两个字串从头开始相等的字符个数: 问如何匹配得出最大值: 思路:建图,套模板. 代码: # ...

  6. 如何在sublime+chrome中调试php代码?

    1.搭建php本地运行环境具体点击如何使用phpstudy本地搭建多站点(每个站点对应不同的端口) 2.下载php_xdebug.dll, [5.3版以上的php下载地址]http://pecl.ph ...

  7. 测试驱动开发(TDD)

    测试驱动开发的基本概念 为什么会出现测试驱动开发 当有一个新的任务时,往往第一个念头就是如何去实现它呢? 拿到任务就开始编码,一边写,变修改和设计 我已经调试了好几遍,应该不会有问题了,好了,先休息一 ...

  8. Sqli-Labs学习总结一

    题目1-20 github地址 前言 以前对于SQL注入,就是先判断下能不能注入,可以的话先试着联合查询,不行的话再上SQLMap,去年寒假拿了一本<SQL注入攻击与防御>,拿回家,看了几 ...

  9. 【Alpha】Daily Scrum Meeting——Day4

    站立式会议照片 1.本次会议为第四次Meeting会议: 2.本次会议在大课间09:40,在图书馆一楼楼道召开,本次会议为30分钟讨论昨天的任务完成情况以及接下来的任务安排. 燃尽图 每个人的工作分配 ...

  10. 201521123013 《Java程序设计》第6周学习总结

    1. 本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 Q1.clone方法 1.1 Object ...