html5二维动画教程,H5+JS二维动画制作的一个实例

今天介绍一个网络上并不常用的插件two.js，刚开始学习的过程中，发现网上并没有合适的教程，在此发表基本操作

two.js是一款网页二维绘图软件，可以在指定区域内产生自设的各种动画效果

下载网址如下：

class1：

一：如何使用：

首先在页面中引入js文件：

打开网页控制台console，输入Two，如果返回一个数组，证明已生效，如图：

创建一个div，作为选区

#draw-shapes{

border: 1px solid blue;

width: 400px;

height: 300px;

background-color: green;

}

在JS中选取上面的div

var elem = document.getElementById('draw-shapes');//选中页面上的div

二：创建空间与空间中的形状：

完成上述操作以后，进行创建二维空间操作

= { width: , height: };

two = Two().appendTo(elem);

创建图形：

var circle = two.makeCircle(72, 100, 50);//创建圆形(x坐标，y坐标，半径)var rect = two.makeRectangle(213, 100, 100, 100);//创建矩形(x，y，宽，高)

三：调整图形属性：

circle.fill = ;circle.stroke = ; circle.linewidth = ;circle.opacity = ;= = = = ;

rect.noStroke();//去掉边线

四：投射到网页上：

将生成的空间，图形投射到网页上，需要输入如下指令：

two.update();

在网页中的效果如图所示

五：组的作用与建立：

组可以将数个图形合并到一个组中，一个组可以设置相同的属性与效果

在创建完图形之后，可以执行如下代码：

var group = two.makeGroup(circle, rect);

将两个图形放到一个组中

// 可以对组内所有形状进行属性设定group.translation.set(two.width / 2, two.height / 2);//让一个组内所有的形状位移，使中心保持在二维空间的什么位置group.rotation = Math.PI;//旋转group.scale = 0.75;//缩放

group.linewidth = 7;//统一设置线宽

通过以上指令对组内所有形状进行相同的操作

上图为操作后的两个形状的效果。

今天就先介绍这么多，下次会详细说明如何形成动画效果

学会了的小伙伴记得点赞哦！

html5二维动画教程,H5+JS二维动画制作的一个实例相关推荐

Threejs进阶之十二：Threejs与Tween.js结合创建动画
tween.js介绍 Tween.js是一个可以产生平滑动画效果的js库,其官方地址为:https://github.com/tweenjs/tween.js/,可以将源码下载后,可以在tween.j ...
appinventor HTML5,App Inventor编程教程-第18课-创建动画应用
本章将讨论另一类应用--包含简单动画(会移动的物体)的应用.你将学习用App Inventor创建二维游戏的基本知识,包括熟练使用精灵组件,以及处理像两个物体碰撞这样的事件. 当在电脑屏幕上看到一个平 ...
android svg 线条动画教程,简单的SVG线条动画
[TOC] 看到网页中那种有如写字般的动画,觉得挺好玩的,就找了下制作方法,也比较简单,在此记录一下; 先上几张图看看: 简单的线条动画 ps4 用到的属性 stroke 定义边框颜色值; strok ...
【UnityDragonBones】像素角色人物骨骼动画教程（三）骨骼动画人物奔跑起来
[手机游戏像素画美术教程]跟Tsugumo学像素画系列-奔跑动画序列(完结) [手机游戏像素画美术教程]跟Tsugumo学像素画系列-让光照进来 [手机游戏像素画美术教程]跟Tsugumo学像素画系列 ...
qrcode.min.js生成二维码以及reqrcode.js二维码解码
生成二维码 1.引入js qrcode.min.js ,下载地址:https://download.csdn.net/download/weixin_43830264/87472390 2.根据需求设 ...
html5游戏猪打狼,H5 js锅打灰太狼
Document /* 标签样式初始化 */ body{margin:0;padding:0;background:#fff;font-size:14px;font-family:Arial,Helv ...
android 漩涡动画,使用P5.js构造漩涡动画特效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var ticker = void 0; var positions = void 0; var nrOfC ...
html5图灵机器人自动会话代码,Vue结合图灵机器人制作的一个简单的仿微信聊天的自动回复机器人...
HTML5模拟微信聊天界面 /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; font-family: '微软雅黑' } #cont ...
js 和 css动画
js和css动画使用setTimeout()或者setInterval()使用这两个函数定时调用一段代码.这是其原理. 目的,重复修改内联样式,达到动画的效果通过在相同的时间内构造出一帧帧的内容, ...

html5二维动画教程,H5+JS二维动画制作的一个实例

html5二维动画教程,H5+JS二维动画制作的一个实例相关推荐

最新文章

热门文章