【重点突破】——two.js模拟绘制太阳月亮地球转动
一、引言
自学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模拟绘制太阳月亮地球转动的更多相关文章
- OpenGL学习笔记 之三 (简单示例 太阳月亮地球)
#include<glut.h> // 太阳.地球和月亮 // 假设每个月都是30天 // 一年12个月,共是360天 ;//day的变化:从0到359 void myDisplay(vo ...
- 【重点突破】——Canvas技术绘制随机改变的验证码
一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...
- 【重点突破】——Canvas技术绘制音乐播放器界面
一.引言 在用Canvas练习制作了验证码之后,还有一个用Canvas技术很综合的练习——制作音乐播放器.在做这个练习的过程中,还有一个重要的观察点,那就是理解Canvas的一大问题. 二.要求 点 ...
- CSS太阳月亮地球三角恋旋转效果
纯粹玩一下,好像没有什么实际的卵用,but,纯玩买不了上当,纯玩买不了受骗........ 地月旋转的一个css效果,无聊玩玩,可以复制到记事本试试 <!DOCTYPE html>< ...
- OpenGL “太阳、地球和月亮”天体运动动画 例子
http://oulehui.blog.163.com/blog/static/7961469820119186616743/ OpenGL “太阳.地球和月亮”天体运动动画 例子 2011-10-1 ...
- WPF太阳、地球、月球运动轨迹模拟
原文:WPF太阳.地球.月球运动轨迹模拟 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/article/details/ ...
- three.js模拟实现太阳系行星体系
概况如下: 1.SphereGeometry实现自转的太阳: 2.RingGeometry实现太阳系星系的公转轨道: 3.ImageUtils加载球体和各行星贴图: 4.canvas中createRa ...
- js模拟抛出球运动
js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...
- Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...
随机推荐
- android monkey测试学习
前提是:有安卓环境,能用adb命令 一.Monkey 测试的目的? 该工具可用于测试稳定性. 开发人员结合monkey 打印的日志 和系统打印的日志,解决测试中出现的问题 二.Monkey 测试的特点 ...
- K/3 WISE V14.3官方原版云盘下载地址及培训PPT
电梯直达 楼主 发表于 15 分钟前 | 只看该作者 查看 : 10|回复 : 0 金蝶K/3 WISE打造企业"智造力",为企业财务管理决策提供全方位信息,产.供.销 ...
- MVC客户端验证
引用JS 注意:删除Layout里面默认引用的JQUERY,否则可能引起JS冲突. <link href="~/Content/Site.css" rel="sty ...
- Haproxy基于ACL做访问控制
author:JevonWei 版权声明:原创作品 haproxy配置文档 https://cbonte.github.io/haproxy-dconv/ 基于ACL做访问控制(四层代理) 网络拓扑 ...
- LVS之DR模式实战及高可用性
author:JevonWei 版权声明:原创作品 LVS-DR实现同网段调度web模式 拓扑环境 网络环境 RS1 RIP 192.168.198.138/24 VIP 192.168.198.10 ...
- Weave 如何与外网通信?- 每天5分钟玩转 Docker 容器技术(66)
上一节我们学习了 Weave 网络内部如何通信,今天讨论 Weave 如何与外界通信. weave 是一个私有的 VxLAN 网络,默认与外部网络隔离.外部网络如何才能访问到 weave 中的容器呢? ...
- java_jstl 标签库
jstl标签库的使用以及介绍 jstl:jsp标准标签库,是jsp的标签集合,它里面封装了jsp通用的核心功能,比如:建构化的任务,迭代,条件判断,xml 文档的操作,国际化标签,sql标签,还提供框 ...
- 【JavaScript基础系列】决定你的人生能走多远的,是基础。
前言 javaScript门槛非常低,一点语法,一个dom,一个bom就可以使用它开发大部分js应用,再加上现在层出不穷的框架极大的简化抽象了javaScript的使用方式,但是我们始终不能忘记的一点 ...
- HTTP协议Keep-Alive模式详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp22 HTTP协议Keep-Alive模式详解 1.什么是Keep-Aliv ...
- 32位汇编第二讲,编写窗口程序,加载资源,响应消息,以及调用C库函数
32位汇编第二讲,编写窗口程序,加载资源,响应消息,以及调用C库函数 (如果想看所有代码,请下载课堂资料,里面有所有代码,这里会讲解怎么生成一个窗口程序) 一丶32位汇编编写Windows窗口程序 首 ...