H5JS二维动画制作!two.js的基本操作class1
今天介绍一个网络上并不常用的插件two.js,刚开始学习的过程中,发现网上并没有合适的教程,在此发表基本操作
two.js是一款网页二维绘图软件,可以在指定区域内产生自设的各种动画效果
下载网址如下: https://two.js.org/#download
class1:
一:如何使用:
首先在页面中引入js文件:
<script src="js/two.js" type="text/javascript" charset="utf-8"></script>
打开网页控制台console,输入Two,如果返回一个数组,证明已生效,如图:
创建一个div,作为选区
<div id="draw-shapes"></div>
<style type="text/css"> #draw-shapes{
border: 1px solid blue;
width: 400px;
height: 300px;
background-color: green;
} </style>
在JS中选取上面的div
var elem = document.getElementById('draw-shapes');//选中页面上的div
二:创建空间与空间中的形状:
完成上述操作以后,进行创建二维空间操作
var params = { width: , height: };//二维空间宽高(overflow hidden) var two = new Two(params).appendTo(elem);//新建一个在div中的二维空间
创建图形:
var circle = two.makeCircle(, , );//创建圆形(x坐标,y坐标,半径)
var rect = two.makeRectangle(, , , );//创建矩形(x,y,宽,高)
三:调整图形属性:
// 具体设置不同的属性
circle.fill = '#FF8000';//fill填充色
circle.stroke = 'red'; // 边线颜色
circle.linewidth = ;//边线宽
circle.opacity = 0.5;//透明度 rect.fill = 'blue';
rect.opacity = 0.75;
rect.stroke = "white";
rect.linewidth = ;
rect.noStroke();//去掉边线
四:投射到网页上:
将生成的空间,图形投射到网页上,需要输入如下指令:
two.update();
在网页中的效果如图所示
五:组的作用与建立:
组可以将数个图形合并到一个组中,一个组可以设置相同的属性与效果
在创建完图形之后,可以执行如下代码:
var group = two.makeGroup(circle, rect);
将两个图形放到一个组中
// 可以对组内所有形状进行属性设定
group.translation.set(two.width / , two.height / );//让一个组内所有的形状位移,使中心保持在二维空间的什么位置
group.rotation = Math.PI;//旋转
group.scale = 0.75;//缩放 group.linewidth = ;//统一设置线宽
通过以上指令对组内所有形状进行相同的操作
上图为操作后的两个形状的效果。
今天就先介绍这么多,下次会详细说明如何形成动画效果
学会了的小伙伴记得点赞哦!
H5JS二维动画制作!two.js的基本操作class1的更多相关文章
- 微信QQ的二维码登录原理js代码解析
这篇文章主要大家详细解析了微信QQ的二维码登录原理js代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在很多地方就是都出现了使用二维码登录,二维码付款,二维码账户等应用(这里的二维码种马,诈骗 ...
- 什么是二维数组?二维遍历?Java二维数组制作图片迷宫 使用如鹏游戏引擎制作窗口界面 附带压缩包下载,解压后双击start.bat启动
什么是二维数组? 数组当中放的还是数组 int [][] arr=new int[3][2]; 有3个小箱子,每个箱子2个格子. 看结果? int [][] arr=new int[3][2]; Sy ...
- Python 二维码制作
Python 二维码制作 先介绍python 二维码制作的第三方库 QRCode .MyQR QRCode 生成这个二维码只用三行 import qrcode img = qrcode.make ...
- 二维码制作分享-Python
分享一个简单快捷的二维码制作,Python实现. 1.安装准备 已安装的Python+Pycharm的计算机.本人win7+Python3.6+Pycharm 2.库包下载安装 Python二维码制作 ...
- Python 支付宝红包二维码制作步骤分享
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! 支付宝红包二维码制作步骤分享 2022. ...
- 简单又炫酷的two.js 二维动画教程
前 言 S N 今天呢给大家介绍一个小js框架,Two.JS.其实在自己学习的过程中并没有找到合适的教程,所以我这种学习延迟的同学是有一定难度的,然后准备给大家整理一份,简单易懂的小教程 ...
- php 二维数组传递给 js 问题解决记录
需求: php从数据库中读取到二维数组.传递到js中 实现步骤: php:json_encode → json → js:eval 即在php中使用json_encode()将php的二维数 ...
- JavaScript二维码生成——qrcode.js
在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...
- jQuery生成二维码 jquery.qrcode.js
https://github.com/jeromeetienne/jquery-qrcode 1.将jquery.qrcode.min.js和jquery添加到您的网页中 <script src ...
随机推荐
- 微信小程序后台音乐播放注意事项
wx.seekBackgroundAudio(OBJECT) 作用:控制音乐播放进度. 注意: 该事件 会触发 wx.onBackgroundAudioPlay(CALLBACK) 事件 ,也就是相当 ...
- CodeVS1344 线型网络
题目描述 Description 有 N ( <=20 ) 台 PC 放在机房内,现在要求由你选定一台 PC,用共 N-1 条网线从这台机器开始一台接一台地依次连接他们,最后接到哪个以及连接的顺 ...
- 【算法系列学习】巧妙建图,暴搜去重 Counting Cliques
E - Counting Cliques http://blog.csdn.net/eventqueue/article/details/52973747 http://blog.csdn.net/y ...
- Struts2之 OGNL表达式和值栈
技术分析之OGNL表达式概述(了解) 1. OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写 * 所谓对象图,即以任意 ...
- 面向对象设计(Object-Oriented Design,OOD)
前言 OOD简介 Shubho:亲爱的,让我们开始学习OOD吧.你了解面向对象原则吗? Farhana:你是说封装,继承,多态对吗?我知道的. Shubho:好,我希望你已了解如何使用类和对象.今天我 ...
- mybatis mapper.xml 写关联查询 运用 resultmap 结果集中 用 association 关联其他表 并且 用 association 的 select 查询值 报错 java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for mybatis.map
用mybaits 写一个关联查询 查询商品表关联商品规格表,并查询规格表中的数量.价格等,为了sql重用性,利用 association 节点 查询 结果并赋值报错 商品表的mapper文件为Gooo ...
- 计算facebook sdk需要的key hashes
1. 下载openssl,在C盘创建openssl文件夹,解压下载的zip到openssl文件夹. 2. 找到debug.keystore. windows下在C:\Users\用户名\.androi ...
- vim 编辑中执行正则表达式
1.进入vim 编辑模式 2.输入:set magic 3.输入/,然后再次输入正则表达式
- jt格式文件与网格压缩
jt格式文件与网格压缩 介绍 jt是一种3D数据格式,主要用于工业,产品可视化,数据交换,并且西门子在2012推动jt成为ISO国际标准.在文件尺寸方面,采用了不少专门的压缩方法,比较轻量化. jt文 ...
- 【less和sass的区别,你了解多少?】
在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数 ...