閱讀前，建議可以參考Day1：閱讀指南＆為何選擇這個題目？

▌挑戰簡介

• 題目：三十天用Vue.jS打造一個網路商城

• 挑戰內容：以六角學院的「Vue出一個電商網站」＆大陸慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」（主要學架設MongoDB）作為主要教材嘗試在30天內打造網路商城

• 本篇性質：上周末去高雄參加MOPCON科技年會&這周學校期中考，暫時沒有時間趕進度，所以就先紀錄一些心得，托時間好了XD

▌PixiJS套件

這次科技年會有一場在介紹PixiJS，簡單來說PixiJS就是一種可以讓網動起來的套件。

像是奔跑吧!台北就是PixiJS的網站，然後我找到他們的分享奔跑吧！台北：程式幕後分享可以參考

▌pixi js 和 three.JS 有什麼不同

牽涉到網頁動畫，市面上常用的套件有兩種

• pixi js
• three.JS
  他們有什麼不同呢?

Pixi is a WebGL renderer, but can fall back to canvas if WebGL is not supported or turned off.

意思就是，pixi 可以使用 WebGL，然後一旦發現裝置不支援WebGL時，就可以轉回支援canvas

因此雖然pixi js 和 three同為動畫的drawing libraries，但pixi js排名比較高

▌WebGL 和 canvas 有什麼不同

太好了，我其實根本不知道 WebGL 和 canvas 甚至是 SVG 的差別

以下是查詢結果

• SVG:本身會變成瀏覽器 DOM。優點是方便交互，缺點是因為每一個 SVG 元素都是一個 DOM 元素，繪製或移動一個 SVG 元素，瀏覽器都需要重新繪製、渲染頁面
• canvas: 不涉及 DOM 元素，和 SVG 繪製的元素相比，交互性差，但也正因如此，在元素自身的動畫特效上不受 DOM 位置限制，在瀏覽器性能（載入速度）上比 SVG 更佳。
• WebGL:WebGL 通過 WebGL JS API 連接 Javascript 和 GPU 編譯程序。GPU 繪圖的渲染大部分在 GPU 上進行，對瀏覽器壓力減小，性能幾個量級地提高，使 WebGL 成為瀏覽器內的3D渲染、大數據可視化唯一的選擇。

我其實不懂GPU 編譯程序在說什麼哈哈

▌pixi js支援的效果

• 多點觸控
• 圖片旋轉
• 支援遮罩(不用自己刻)
• 跟著滑鼠移動
• 圖片的合成上傳

▌心得

我希望下個專案可以引入pixi js做一個互動效果