H5+JS二維動畫制作的一個實(shí)例

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:20:31

H5+JS二維動畫制作的一個實(shí)例

H5+JS二維動畫制作的一個實(shí)例:今天介紹一個網(wǎng)絡(luò)上并不常用的插件two.js，剛開始學(xué)習(xí)的過程中，發(fā)現(xiàn)網(wǎng)上并沒有合適的教程，在此發(fā)表基本操作two.js是一款網(wǎng)頁二維繪圖軟件，可以在指定區(qū)域內(nèi)產(chǎn)生自設(shè)的各種動畫效果下載網(wǎng)址如下：class1：一：如何使用：首先在頁面中引入js文件： <

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀H5+JS二維動畫制作的一個實(shí)例:今天介紹一個網(wǎng)絡(luò)上并不常用的插件two.js，剛開始學(xué)習(xí)的過程中，發(fā)現(xiàn)網(wǎng)上并沒有合適的教程，在此發(fā)表基本操作two.js是一款網(wǎng)頁二維繪圖軟件，可以在指定區(qū)域內(nèi)產(chǎn)生自設(shè)的各種動畫效果下載網(wǎng)址如下：class1：一：如何使用：首先在頁面中引入js文件： <

今天介紹一個網(wǎng)絡(luò)上并不常用的插件two.js，剛開始學(xué)習(xí)的過程中，發(fā)現(xiàn)網(wǎng)上并沒有合適的教程，在此發(fā)表基本操作

two.js是一款網(wǎng)頁二維繪圖軟件，可以在指定區(qū)域內(nèi)產(chǎn)生自設(shè)的各種動畫效果

下載網(wǎng)址如下：

class1：

一：如何使用：

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

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

打開網(wǎng)頁控制臺console，輸入Two，如果返回一個數(shù)組，證明已生效，如圖：

創(chuàng)建一個div，作為選區(qū)

<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

二：創(chuàng)建空間與空間中的形狀：

完成上述操作以后，進(jìn)行創(chuàng)建二維空間操作

 = { width: , height: }; 

 two = Two().appendTo(elem);

創(chuàng)建圖形：

var circle = two.makeCircle(72, 100, 50);//創(chuàng)建圓形（x坐標(biāo)，y坐標(biāo)，半徑）var rect = two.makeRectangle(213, 100, 100, 100);//創(chuàng)建矩形（x，y，寬，高）

三：調(diào)整圖形屬性：

circle.fill = ;circle.stroke = ; circle.linewidth = ;circle.opacity = ;= = = = ;
　　　　 rect.noStroke();//去掉邊線

四：投射到網(wǎng)頁上：

將生成的空間，圖形投射到網(wǎng)頁上，需要輸入如下指令：

two.update();

在網(wǎng)頁中的效果如圖所示

五：組的作用與建立：

組可以將數(shù)個圖形合并到一個組中，一個組可以設(shè)置相同的屬性與效果

在創(chuàng)建完圖形之后，可以執(zhí)行如下代碼：

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

將兩個圖形放到一個組中

// 可以對組內(nèi)所有形狀進(jìn)行屬性設(shè)定group.translation.set(two.width / 2, two.height / 2);//讓一個組內(nèi)所有的形狀位移，使中心保持在二維空間的什么位置group.rotation = Math.PI;//旋轉(zhuǎn)group.scale = 0.75;//縮放 
 group.linewidth = 7;//統(tǒng)一設(shè)置線寬

通過以上指令對組內(nèi)所有形狀進(jìn)行相同的操作