今天介紹一個網路上不常用的插件two.js,剛開始學習的過程中,發現網路上並沒有合適的教程,在此發表基本操作
two.js是一款網頁二維繪圖軟體,可在指定區域內產生自設的各種動畫效果
下載網址如下:
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二:建立空間與空間中的形狀:完成上述操作以後,進行建立二維空間操作
= { 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;//统一设置线宽透過以上指令對群組內所有形狀進行相同的動作 上圖為操作後的兩個形狀的效果。 今天就先介紹這麼多,下次會詳細說明如何形成動畫效果學會了的小夥伴記得按讚哦!
以上是H5+JS二維動畫製作的一個實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!