案例解析
這次要分析的是在法國的設計師 Louis Ansa 的作品集網頁，在 Louis Ansa 的網頁中開始的載入與關於頁面都有出現的遮罩效果，讓老闆帶著大家來看看這是如何實現的吧！
分析思路
這一頁的動畫主要有三個部分組成：
- 球型遮罩：在圓形裡面的文字會呈現不同的背景色與內文顏色
- 移動的球體：兩個球體的圓心沿著畫面的中心做圓周運動
- 變動的球體形狀：球體的邊界呈現不規則波動
首先針對1.的部分，要改變特定區域內的顏色效果，依據需要達成的效果不同，我們可以直接選擇改變區域內的顏色內容；或是使用兩層圖片，再將區域內不需要的上層元素移除掉。
如果只需要處理顏色的變換，沒有非常複雜的動畫，可以使用 css 的 mix-blend-mode 屬性來實現，mix-blend-mode 提供了saturation、hue、difference等條件直接處理顏色。但是考量到後續如果需要做出多個物件、比較複雜的變形以及效能問題，從 Canvas 下手就會更靈活。
實作
1. 創建兩層 canvas
首先先使用兩層的canvas，並做出完全相同的長寬、內文、行高與字體大小的圖片：
2. 設定遮罩圖形與透視的效果
這個步驟是整個案例的核心，我們使用到 canvas 的 globalCompositeOperation屬性，globalCompositeOperation可以指定 canvas 針對當前繪製圖形與背景的交互效果。
舉例來說，預設的值是 source-over即是直接覆蓋過背景的圖層，畫上新的路徑；而我們使用到的是 destination-out，可以將新舊圖形重疊的區域設定為透明，只在沒有重疊的的部分畫出圖形。
只保留新、舊圖形非重疊的舊圖形區域，其餘皆變為透明。
左圖片中，藍色方形是背景的原始圖形，紅色圓形是新繪製的圖形，我們可以比較一下兩種形式對於背景圖形的影響。關於 globalCompositeOperation的更多選項與說明可以參考 MDN 的 Canvas 教學。
實作中先在上層的 canvas 中繪製出作為遮罩的圓形，並在繪製圓形之前將 ctx.globalCompositeOperation設定為"destination-out"，如此一來，在這個圓形的範圍內，原本被上層遮住的黑底紅字的底層就會顯示出來。最後也別忘了，在繪製完遮罩的部分之後將參數設定回原本的 "source-over"，這樣第一個部分就大功告成了！
3. 創建圍繞著圖片中心轉動的動態效果
有了圓形遮罩之後，我們要如何讓他繞著圖形的中心點做圓周運動呢？
這裡我們可以活用 canvas 的 translate 與 rotate 方法，在每一次渲染的時候，先使用rotate 將畫布旋轉 1 度，之後再使用translate移動到遮罩的圓心位置，這樣就可以創造出像是衛星環繞的圓周運動效果了。這裡有個小地方要注意，就是我們在移動圍繞的中心點跟旋轉畫布之前，要先用 ctx.save()將目前的畫布資訊存起來，等到繪製完成之後，再使用 ctx.restore() 回復到旋轉跟移動之前的位置，才不會影響到其他部分的圖形繪製喔。
旋轉的部分可以參考這個範例：
登愣，老闆上菜啦！
結合以上的步驟，最後的成品就是這樣：
這個案例使用遮罩加上簡單的動態實現靈活變動的效果，關於遮罩的應用還有很多，像是這個案例就使用了一樣的 canvas 特性做出類似刮刮卡的效果：https://codepen.io/dudleystorey/pen/yJQxLX。而形狀的部分，除了使用單純的圓形，我們也可以模擬原版中抖動的邊框，或是不同形狀的靈活變化。
有什麼有趣的想法都歡迎在留言告訴老闆，或是你覺得這樣的特性還有哪些可以靈活運用的地方呢？如果這篇文章超過 15 個留言的話，老闆將會進一步解密如何做出原本中華麗的動態球體！老闆的網頁實驗室，我們下回見囉！
參考資料：
