36 canvas全域性透明度 覆蓋合成

2021-10-10 02:02:53 字數 997 閱讀 7119

語法

globalalpha = value

這個屬性影響到 canvas 裡所有圖形的透明度,

有效的值範圍是 0.0 (完全透明)到 1.0(完全不透明)

預設是 1.0

示例

您的瀏覽器不支援canvas,請公升級

if(canvas.getcontext)

效果

語法

覆蓋合成

source:新的影象(源)

destination:已經繪製過的圖形(目標)

globalcompositeoperation

source-over(預設值):源在上面,新的影象層級比較高

source-in :只留下源與目標的重疊部分(源的那一部分)

source-out :只留下源超過目標的部分

source-atop:砍掉源溢位的部分

destination-over:目標在上面,舊的影象層級比較高

destination-in:只留下源與目標的重疊部分(目標的那一部分)

destination-out:只留下目標超過源的部分

destination-atop:砍掉目標溢位的部分

示例

您的瀏覽器不支援canvas,請公升級

if(canvas.getcontext)

效果

Canvas學習系列一 初識canvas

最近你開始在學習canvas,打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來,如有什麼不足之處還請大神們多多指出。1.canvas介紹 canvas元素的出現,可以說開啟的web世界繪製動畫,圖形的大門,其功能非常強大 canvas 元素是html5中功能最強大的元素,它的能力主要...

Canvas學習筆記 Canvas常用API方法

var canvas document.queryselector canvas var context canvas.getcontext 2d 之後的方法呼叫都是基於contextcontext.beginpath 開啟一條新的路徑。不一定要與closepath 配對,可以不關閉舊路徑直接開啟新...

Canvas學習系列一 初識canvas

最近你開始在學習canvas,打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來,如有什麼不足之處還請大神們多多指出。1.canvas介紹 canvas元素的出現,可以說開啟的web世界繪製動畫,圖形的大門,其功能非常強大 canvas 元素是html5中功能最強大的元素,它的能力主要...