便捷的前端绘图框架：two.js初探

附：two.js做的小栗子

1.two.js用来做动画十分便捷，因为two.js制作的动画默认都是以自己为中心旋转

3.two.js的旋转不会造成累加效果

2. Two.js中不使用定时器，使用Two.play()方法，two.js 动画原理：调用two.play()方法，每秒调用60次,two.update() //每次调用触发一次update事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>svg,canvas{background-color: #4cae4c;}</style>
</head>
<body>
<h1>two.js 旋转</h1>
<div id="box"></div>
<script src="js/two.js"></script>
<script>var box=document.getElementById("box")//绘制一个2d图像var two =new Two({width :600,height : 600,type : Two.Types.svg}).appendTo(box);//绘制圆形var c=two.makeCircle(50,50,25)//绘制矩形var r=two.makeRectangle(200,200,100,100)//旋转(two.js示意自己为中心，并且旋转不会累加)var deg=0two.on("update",function () {deg+=3r.rotation=deg*Math.PI/180;});two.play()</script>
</body>
</html>

two.js可以将两个图形合并再进行操作：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>svg,canvas{background-color: #4cae4c;}</style>
</head>
<body>
<script src="js/two.js"></script>
<div id="box">
</div>
<script>var box=document.getElementById("box")var two=new Two({width:600,height:600,type:Two.Types.canvas}).appendTo(box)var c=two.makeCircle(100,100,50)var r=two.makeRectangle(100,100,200,300)//将两个图形作为一组var g=two.makeGroup(r,c)//平移原点g.translation.set(200,200);// g.rotation=30*Math.PI/180;// two.update()//two.js 动画原理：调用two.play()方法//每秒调用60次,two.update()//每次调用触发一次update事件var deg=0two.on("update",function () {deg+=3g.rotation=deg*Math.PI/180;});two.play()
</script>
</body>
</html>

便捷的前端绘图框架：two.js初探相关推荐

前端三大框架 Vue.js、AngularJS、React 的区别
Vue.js Vue.js 是一种构建数据驱动的Web界面的渐进式框架,Vue.js 采用自底向上增量开发的设计. Vue.js 轻量高效,数据双向绑定(响应式数据绑定), 它会自动响应数据的变化情况 ...
视频教程-WebGL 可视化3D绘图框架：Three.js 零基础上手实战-其他
WebGL 可视化3D绘图框架:Three.js 零基础上手实战网名风舞烟,中国科技大学计算机专业.微软认证讲师(MCE).微软数据分析讲师.10多年软件行业从业经验,参与过数百万的企业级ERP系统 ...
前端框架-Angular.js
前端的功能与单页应用就webapp开发而言,前端实现的功能主要有: -实现UI(渲染出用户可见的视图和各种功能组件) -对用户的操作(事件)做出反应 -实现业务逻辑 -实现页面路由 -与服务器端交互 ...
js ui 前端UI框架
http://fineui.com/ http://www.layui.com/ js ui 前端UI框架
前端绘图开源组件_5 个优秀前端 UI 框架
随着 Web 技术的不断发展,前端开发框架层出不穷,各有千秋,今天小编为大家奉上前端 UI 框架的开源项目,希望大家能够喜欢!如果大家有 UI 框架相关的开源项目,也可以托管到码云上,我们会及时给予推 ...
前端绘图开源组件_推荐10款常用的高质量的Web前端UI开源框架，必收藏
Web前端领域最近几年发展的特别迅速,可以说是百家争鸣.Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队).对于现在的开发者来说,都向着全栈方向发展, ...
[Vue 牛刀小试]：第十六章 - 针对传统后端开发人员的前端项目框架搭建
一.前言在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
web前端技术框架选型参考
一.出发点随着Web技术的不断发展,前端架构框架.UI框架.构建工具.CSS预处理等层出不穷,各有千秋.太多的框架在形成初期,都曾在web领域掀起过一场技术浪潮,可有些却仅仅是昙花一现,随着他们用 ...

便捷的前端绘图框架：two.js初探

1.two.js用来做动画十分便捷，因为two.js制作的动画默认都是以自己为中心旋转

3.two.js的旋转不会造成累加效果

2. Two.js中不使用定时器，使用Two.play()方法，two.js 动画原理：调用two.play()方法，每秒调用60次,two.update() //每次调用触发一次update事件

two.js可以将两个图形合并再进行操作：

便捷的前端绘图框架：two.js初探相关推荐

最新文章

热门文章

便捷的前端绘图框架：two.js初探

1.two.js用来做动画十分便捷，因为two.js制作的动画默认都是以自己为中心旋转

3.two.js的旋转不会造成累加效果

2. Two.js中不使用定时器，使用Two.play()方法，two.js 动画原理：调用two.play()方法 ，每秒调用60次,two.update() //每次调用触发一次update事件

two.js可以将两个图形合并再进行操作：

便捷的前端绘图框架：two.js初探相关推荐

最新文章

热门文章

2. Two.js中不使用定时器，使用Two.play()方法，two.js 动画原理：调用two.play()方法，每秒调用60次,two.update() //每次调用触发一次update事件