canvas學習筆記七 混合和裁剪

如果我們先畫了乙個圖形，然後要在這個圖形上面再畫乙個圖形，那麼這個圖形會怎麼樣呢？是覆蓋在原來的圖形上面嗎？這時候，就要用到globalcompositeoperation這個屬性了。

當有兩個圖形重疊的時候，可以有很多種混合模式，比如上面的圖形蓋住下面的，或者下面的圖形蓋住上面的，或者去掉重疊的部分。globalcompositeoperation這個屬性就是用來設定混合方式的。這個屬性總共有12種值。

因為太多了，我就不一一枚舉了，大家自己去查。戳這裡

我這裡就簡單介紹其中幾種。

source-over

預設值。新的形狀會覆蓋在原來的形狀上。

destination-over

和上面乙個屬性反過來。

copy

只顯示新形狀。

如果你只想在乙個圓形區域畫圖，而圓形區域外的圖形都看不見的話，你可以使用clip()裁剪畫布。

實際上canvas本身就帶有乙個canvas一樣大的裁剪區域，所以實際上並沒有新增裁剪路徑，只是裁剪路徑被修改了。

使用clip()無需用closepath()閉合路徑，clip()本身就會閉合路徑。

需要注意的是，當clip()了乙個路徑以後，無法改變clip()的路徑形狀，要恢復的話只能用restore()回到原先的狀態。

function draw()   }

function drawstar(ctx, r)  else 
}  ctx.closepath();
ctx.fill();
ctx.restore();
}

Canvas學習之路（七）

1.定義小球 ball 2.繪製小球 update函式是更新小球用的，ctx.fillstyle rgba 255,255,255,05 這一句是用來增添小球的運動軌跡的。function drawball ctx 3.update函式 function update else 4.呼叫上面的函式v...

canvas學習筆記

1 canvas 元素a 元素有乙個叫做 getcontext 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能，通過簡單的測試getcontext 方法的存在，指令碼可以檢查程式設計支援性var canvas document.getelementbyid tutorial if canvas....

canvas學習筆記

canvas是html5中的新功能，它是一塊，在你開闢的空間內部用 畫圖。而建立畫布和畫圖是需要一些步驟的 canvas是布 context是各種筆 先看乙個簡單的 瀏覽器不支援canvas 每乙個我們要進行的canvas操作都必須有獲取畫布，和獲取畫布內容的操作。然後還有乙個問題就是，我們要預防老...