日期:2013-7-10 来源:GBin1.com
two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现:
- webgl
- svg
- 2d画布
使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:Two.Types.canvas, Two.Types.svg, or Two.Types.webgl
下面是使用two.js生成的一个动画效果:
http://www.gbtags.com/gb/debug/592abb4d-6449-4654-a824-0232c0c3b110.htm
相关JS代码如下:
var el = document.getElementById("main"), two = new Two({ width: '800', height: '600' }); two.appendTo(el); var earthAngle = 0, moonAngle = 0, distance = 30, radius = 50, padding = 100, orbit = 200, offset = orbit + padding, orbits = two.makeGroup(); var earthOrbit = two.makeCircle(offset, offset, orbit); earthOrbit.noFill(); earthOrbit.linewidth = 2; earthOrbit.stroke = "#EFEFEF"; orbits.add(earthOrbit); two.update(); var pos = getPositions(earthAngle++, orbit), earth = two.makeCircle(pos.x + offset, pos.y + offset, radius); earth.stroke = "#444"; earth.linewidth = 3; earth.fill = "#CCCCCC"; var moonOrbit = two.makeCircle(earth.translation.x, earth.translation.y, radius + distance); moonOrbit.noFill(); moonOrbit.linewidth = 2; moonOrbit.stroke = "#ccc"; orbits.add(moonOrbit); var pos = getPositions(moonAngle, radius + distance), moon = two.makeCircle(earth.translation.x + pos.x, earth.translation.y + pos.y, radius / 4); moonAngle += 5; moon.fill = "#474747"; two.bind("update", function (frameCount) { var pos = getPositions(earthAngle++, orbit); earth.translation.x = pos.x + offset; earth.translation.y = pos.y + offset; var moonPos = getPositions(moonAngle, radius + distance); moon.translation.x = earth.translation.x + moonPos.x; moon.translation.y = earth.translation.y + moonPos.y; moonAngle += 5; moonOrbit.translation.x = earth.translation.x; moonOrbit.translation.y = earth.translation.y; }); function getPositions(angle, orbit) { return { x: Math.cos(angle * Math.PI / 180) * orbit, y: Math.sin(angle * Math.PI / 180) * orbit }; } two.play();
网站地址:http://jonobr1.github.io/two.js
via 极客标签
相关推荐
Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中。 效果如下: 下面是核心js code HTML就不贴了,需要...
Two.js 有一个内置的动画循环,可搭配其他动画库。Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中。
Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中。 二、导入two.js 三、用two.js实现动画 1)一个简单的小...
前端项目-two.js,用于现代浏览器的二维绘图API。
tess-two.tesseract3.01.rar tess-two.tesseract3.01.rar tess-two.tesseract3.01.rar tess-two.tesseract3.01.rar
Two.js 适用于现代浏览器的二维绘图API。 它与渲染器无关,可以使同一api在多个上下文中渲染:webgl,canvas2d和svg。 •••••用法下载最新的并将其包含在html中。 < script src =" js/two.min.js " > <...
四种加密方式 自动将ONE。bat 生成TWO。bat
cycle.js: This file contains two functions, JSON.decycle and JSON.retrocycle, which make it possible to encode cyclical structures and dags in JSON, and to then recover them. JSONPath is used to ...
画布引擎比较描述 , , , , , , 和 ; 在画布上以不同速度移动的1000、2000或5000个不同的矩形。快速开始$ yarn install$ yarn build$ yarn start
After-Effects-CEP-Extension-Two.js 在 After Effects 中加载 TWO.js 形状以塑造图层的概念证明。 有关 Adobe CEP 扩展的更多信息,请参阅: 的以下文字改编自那里: 播放器调试模式设置 除非经过加密签名,...
wowpc.two.Chameleon_2.2svn_r2246_trunk
Essay Two.docx
classtwo.cpp
3DMGAME-Unravel.Two.CHS.Patch.v2.0-3DM.exe
Two.js 是一个二维的绘图 API,用于较新的 Web 浏览器,可基于不同上下文绘制,包括 svg、canvas 和 webgl。
Synchronizing models in a two-way binding can be difficult and with sub resources attached it can be even worse. The next chapter will explain strategies for how to deal with these models. The ...
Java_Two.java
experiment_two.sql