首页 / JAVASCRIPT / H5+JS二维动画制作的一个实例

H5+JS二维动画制作的一个实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了H5+JS二维动画制作的一个实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1791字，纯文字阅读大概需要3分钟。

内容图文

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

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

下载网址如下：

class1：

一：如何使用：

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

    <script src="js/two.js" type="text/javascript" charset="utf-8"></script>

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

H5+JS二维动画制作的一个实例 - 文章图片

创建一个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

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

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

  = { 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();

在网页中的效果如图所示

H5+JS二维动画制作的一个实例 - 文章图片

五：组的作用与建立：

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

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

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;//统一设置线宽

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

H5+JS二维动画制作的一个实例 - 文章图片

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

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

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

以上就是H5+JS二维动画制作的一个实例的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的H5+JS二维动画制作的一个实例全部内容，希望文章能够帮你解决H5+JS二维动画制作的一个实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/301218.html

来源：【匿名】