[Html5] 用於分析26種畫布合成模式（globalCompositeOperation）的演示頁面

来源:https://www.cnblogs.com/zyl910/archive/2022/07/30/Html5_CanvasComposite_demo.html
-Advertisement-
Play Games

數組 數據結構 數據結構顧名思義 就數據的結構 （邏輯結構 存儲結構 演算法） 存儲結構 （數據存儲的結構方式） 線性結構 數組（順序表）隊列棧堆鏈表非線性結構樹圖 hash（散列表） 只要是能存數據的容器 就必須具備增刪改查的方法 數組（個人簡介就是一個地址吧很多東西都存起來） 數組概述：數組固定一 ...


作者： zyl910

一、緣由

Html5畫布（Canvas）的上下文（Context2D）提供globalCompositeOperation屬性，可用於控製圖形的繪製時的合成模式。
查了一下文檔，發現多達共有26種合成模式。且文字介紹很簡略，部分模式看不太懂。
於是我編寫了一個功能豐富的演示頁面，能夠隨時調整globalCompositeOperation等繪製參數，且有詳細信息文本框能用於分析像素合成的計算演算法的等。使用該頁面，能夠很好的學習這26種合成模式。
本文重點介紹演示頁面的功能，及開發過程中的問題處理。下一篇文章將介紹合成模式的計算演算法。

二、合成說明與功能設計

2.1 MDN文檔說明

下圖是MDN的globalCompositeOperation屬性的說明文檔的截圖。可見，對於每一種合成模式，只是用一段話做一下簡介而已。
Html5_globalCompositeOperation.jpg

文檔上共列出了26種合成模式：

source-over
source-in
source-out
source-atop
destination-over
destination-in
destination-out
destination-atop
lighter
copy
xor
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

還好每一種模式都配了一張圖片範例，讓人稍微有一點頭緒。
每一種合成模式的附圖，由3張子圖片所組成，分別是“existing content”（現有內容）、“new content”（新內容）、“[name]”（合成模式的名稱，如“source-over”）。即將“子圖1（existing content）”的上面繪製“子圖2（new content）”時，該合成模式的處理結果是“子圖3（[name]）”。
每個子圖的左上角區域，還有一個小範例，演示了 藍紅方塊的合成結果。註意是在藍色方塊（子圖1：existing content）的上面繪製紅色方塊（子圖2：new content）的，且紅色方塊向左上角偏移了一點點，這樣便於觀察非重疊時的合成情況。

該文檔的後半部分，提供了一段簡單的JavaScript範例代碼，演示了xor合成模式。摘錄：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.globalCompositeOperation = 'xor';

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

這段範例代碼簡潔明瞭，演示了globalCompositeOperation的用法。但有一個小問題——它繪製的藍紅方塊的位置關係為“藍色在紅色的左上側”，於是先前附圖裡“紅色在藍色的左上側”不同，不利於對比分析之前的說明。
於是我感覺有可開發一個新的演示頁面，使紅藍方塊的位置關係與文檔一致，並提供合成模式的下拉框，便於隨時切換合成模式，觀察合成結果。

2.2 統一術語

MDN文檔為了使文章更好懂，儘量減少專業術語，便採用了 “existing content”、“new content”這樣淺顯的名詞。
但這也帶來一些麻煩，因為該領域的專業資料是用專業術語的，用專業術語才能使邏輯上更清晰。例如 source-over、destination-over 等合成模式的名稱。

常用術語是這3個——

  • Source（源）：待繪製的內容。一般縮寫為“S”。即MDN文檔里的 子圖1“existing content”（現有內容）。
  • Destination（目標）：繪製的目標。一般縮寫為“D”。即MDN文檔里的 子圖2“new content”（新內容）。
  • Output（輸出結果）：合成後的結果。一般縮寫為“O”。即MDN文檔里的 子圖3“[name]”（合成模式的名稱，如“source-over”）。

使用 Source、Destination等術語，最開始可能會感到比較抽象。但熟悉後，會覺得這些概念很簡潔、實用。
在D（Destination）的基礎上，繪製S（Source）圖像，合成模式的運算用“⊙”運算符代替，合成結果為O（Output）。那麼合成處理可以用以下數學式子來簡潔的表示：

O = D ⊙ S

在很多時候，輸出結果Output與目標Destination（現有內容，existing content）是同一個對象。例如Html5的Canva繪圖，目標（Destination）是現有的上下文（Context2D），輸出結果（Output）也是該上下文，只是狀態不同（合成後的結果）。
故O與D其實是等價的，只是人們為了突出表達狀態不同，才用到了O。所以很多時候用“D'”來代替“O”，式子為：

D' = D ⊙ S

為了進一步簡寫數學式子，可以將運算符（⊙）與等號（=）寫在一起，即：

D ⊙= S

這類似編程語言的“複合賦值運算符”——將目標變數D與源值S進行運算，運算結果保存在目標變數D里。

2.3 演示頁面功能設計

首先，能顯示跟MDN文檔一樣的紅藍方塊，便於對照文檔。
提供合成模式（globalCompositeOperation）的下拉框，便於隨時切換合成模式，觀察合成結果。
紅藍方塊能自定義顏色值。即提供文本框能隨時修改 Source、Destination 的顏色值。
紅藍方塊支持漸變繪製。即“to”覆選框右側的文本框能輸入第2顏色進行漸變。勾選“to”覆選框時啟用漸變，未勾選時不漸變。
紅藍方塊支持調整透明度。即“Alpha”覆選框右側的文本框能輸入alpha值（值域為 0~1）。
為瞭解決源漸變繪製時Alpha不同問題，提供“SourceUseImage”覆選框。當它覆選時，會先在一個臨時圖片里繪製好Source，再通過globalCompositeOperation進行繪製。預設覆選。
這些覆選框及文本框能自動生效。具體來說，當焦點離開文本框時，會自動點擊“Refresh”按鈕，使配置生效。
顯示點擊信息的坐標及顏色。首先，會在“Current: (0, 0). Destination sample, Source sample.”這一欄顯示這些信息，如“Current”是當前點擊位置的顏色，其後的括弧是點擊坐標，“Destination sample”是對應目標像素的顏色，“Source sample”是對應源像素的顏色。
能顯示點擊像素的詳細信息，並嘗試給出該合成模式的詳細計算過程。見“Current”欄下側文本框。
除了像MDN文檔那樣顯示 紅框在藍框左上的合成結果（compositeOffset）外，還展示同一位置的合成結果（composite），並顯示了合成前的 destination、source 圖。若勾選“SourceUseImage”，還會顯示半透明處理前的source 圖。
在頁面背後放上一份顏色名稱的表格，便於複製顏色名或rgb值，粘貼到自定義顏色值文本框進行測試。

下麵就是演示頁面的截圖。
Html5_CanvasComposite_pic1.png

2.3.1 詳細信息文本框

詳細信息文本框的內容範例：

Current    : RGBA(0.357, 0.106, 0.427, 0.875), Byte(91, 27, 109, 223), #5b1b6ddf, hsl(287, 0.603, 0.267). Pos(132, 94)
Destination: RGBA(0.000, 0.255, 1.000, 0.753), Byte(0, 65, 255, 192), #0041ffc0, hsl(225, 1.000, 0.500). Pos(132, 394)
Source     : RGBA(0.624, 0.000, 0.000, 0.502), Byte(159, 0, 0, 128), #9f000080, hsl(0, 1.000, 0.312). Pos(469, 431)
compositeMode:	source-over
	Fa = 1; Fb = 1 - As;	Co = As * Cs + Ab * Cb * (1 - As);	Ao = As + Ab * (1 - As)
Ro = As * Rs + Ab * Rb * (1 - As) = 0.502 * 0.624 + 0.753 * 0.000 * (1 - 0.502) = 0.313
Go = As * Gs + Ab * Gb * (1 - As) = 0.502 * 0.000 + 0.753 * 0.255 * (1 - 0.502) = 0.096
Bo = As * Bs + Ab * Bb * (1 - As) = 0.502 * 0.000 + 0.753 * 1.000 * (1 - 0.502) = 0.375
Ao = As + Ab * (1 - As) = 0.502 + 0.753 * (1 - 0.502) = 0.877
Premultiplie:RGBA(0.314, 0.094, 0.376, 0.878), Byte(80, 24, 96, 224), #501860e0, hsl(287, 0.600, 0.235)
Output     : RGBA(0.357, 0.110, 0.427, 0.878), Byte(91, 28, 109, 224), #5b1c6de0, hsl(287, 0.591, 0.269)

說明——

  • Current：當前點擊位置的顏色信息及坐標信息。格式為“RGBA、Byte、#rrggbbaa、hsl、Pos”，即分別為“歸一化的RGBA值、各分量的位元組值、十六進位表示的顏色值、hsl格式的顏色值、點擊坐標”。
  • Destination：當前點擊位置對應目標像素的顏色信息及坐標信息。格式為“RGBA、Byte、#rrggbbaa、hsl、Pos”，即分別為“歸一化的RGBA值、各分量的位元組值、十六進位表示的顏色值、hsl格式的顏色值、點擊坐標”。後面公式里用小寫的“b”或“d”來表示目標像素。
  • Source：當前點擊位置對應源像素的顏色信息及坐標信息。格式為“RGBA、Byte、#rrggbbaa、hsl、Pos”，即分別為“歸一化的RGBA值、各分量的位元組值、十六進位表示的顏色值、hsl格式的顏色值、點擊坐標”。後面公式里用小寫的“s”來表示源像素。
  • compositeMode：合成模式。
  • 公式。為了表示在引用公式，且為了便於與其他內容隔開，公式的的前面加了多個空格。
  • Ro、Go、Bo、Ao：分別顯示 R、G、B、A 通道的計算過程。
  • Premultiplie：顯示原始計算結果，它是 預乘Alpha（Premultiplie Alpha）模式的顏色值。格式為“RGBA、Byte、#rrggbbaa、hsl”，即分別為“歸一化的RGBA值、各分量的位元組值、十六進位表示的顏色值、hsl格式的顏色值”。
  • Output：顯示計算結果，它是 直通Alpha（Straight Alpha）模式的顏色值。格式為“RGBA、Byte、#rrggbbaa、hsl”，即分別為“歸一化的RGBA值、各分量的位元組值、十六進位表示的顏色值、hsl格式的顏色值”。

註——

  1. Html5的畫布，總是使用直通Alpha（Straight Alpha）模式。因運算公式的中間結果是預乘Alpha（Premultiplie Alpha）的，故最終輸出時，需做“預乘Alpha 轉 直通Alpha”的轉換。
  2. Output計算結果，理應與Current相同的，而有時會發現位元組值會有 12的誤差。這是因為Chrome在運算過程中可能用到了低精度整數運算等速度優化手段，而本頁面嚴格按照公式，且使用高精度的浮點運算。對於有256種值的8位色彩通道來說，有位元組值12的誤差，其實只是 2/256=1/128≈0.781% 的誤差，人眼看不出差別，故這些速度優化處理很常見。
  3. 只是對常用混合模式，編寫了了公式與計算過程。有些混合模式尚沒有編寫內容。

三、問題處理經驗

在演示頁面的開發過程中，遇到了一些事先沒想到的問題。現在分享一下處理經驗。

3.1 源漸變繪製時Alpha不同問題

勾選Source的Alpha覆選框，並設為“0.5”，若未啟用漸變（Source的“to”覆選框 未勾選時），可觀察到此時繪製的Source區域是正常的，各像素的Alpha為0.5左右。
若啟用啟用漸變（Source的“to”覆選框 被勾選時），可觀察到Source區域的Alpha不太對勁，各像素的Alpha為0.75左右。

為瞭解決源漸變繪製時Alpha不同問題，提供“SourceUseImage”覆選框。當它覆選時，會先在一個臨時圖片里繪製好Source，再通過globalCompositeOperation進行繪製。預設覆選。
“SourceUseImage”勾選時，可觀察到Source區域的Alpha仍是0.5左右，與配置的值相符。

3.2 Image.onload事件是非同步觸發的

因“SourceUseImage”覆選框，故需要先在另一塊區域繪製源圖，且需要將它轉為Image對象，這樣能便於使用 drawImage 進行繪圖。
使用Image時要註意，它的載入處理是非同步的。
若在設置了Image.src後立即進行繪圖，會發現大多數時候是空的。
為瞭解決這一問題，應處理onload事件，該事件觸發時才表示已載入完畢，可進行後續的繪圖等操作。

代碼摘錄：

// sourceUseImage
let sourceImage = null;
if (sourceUseImage) {
	try{
		//let canvasTemp = document.createElement("canvas");
		let canvasTemp = document.getElementById('canvasTemp');
		canvasTemp.style = "display:block";
		canvasTemp.width = blockWidth;
		canvasTemp.height = blockHeight;
		//canvas.getContext("2d").drawImage(image, 0, 0);
		let ctxTemp = canvasTemp.getContext("2d");
		ctxTemp.save();
		ctxTemp.clearRect(0, 0, blockWidth, blockHeight);
		//ctxTemp.globalAlpha = alphaS;
		drawRectS(ctxTemp, 0, 0, blockWidth, blockHeight, sColor0, sColor1);
		ctxTemp.restore();
		// to image.
		sourceImage = new Image();
		sourceImage.onload = function() {
			doRefresh_draw(sourceImage);
		}
		sourceImage.src = ctxTemp.canvas.toDataURL("image/png");
	} catch(ex) {
		sourceImage = null;
		console.log("Make sourceImage fail! ", ex);
	}
}
//console.log("sourceUseImage: ", sourceUseImage, "sourceImage: ", sourceImage);
if (null!=sourceImage) return;
let canvasTemp = document.getElementById('canvasTemp');
canvasTemp.style = "display:none";
doRefresh_draw(sourceImage);

3.3 部分合成模式會將區域外的顏色均清除為透明的

使用 source-out、destination-out 等合成模式時，不僅影響了Sourcet覆蓋的區域，且會將區域外的顏色均清除為透明的。
若畫布里只需繪製Sourcet，這種情況還可接收。但若是畫布里還有其他內容，這種情況會將區域外的其他內容均清理，變為透明。
例如本演示頁面上會繪製 compositeOffset、composite、destination、source 這四類圖形。因composite是最後進行合成繪製的，當選擇使用 source-out、destination-out 等合成模式時，會將compositeOffset、destination、source 的內容均清除，僅保留composite的。

為瞭解決這一問題，需要在合成繪製前，設置好剪裁區域。
對於Html5畫布來說，剪裁功能是這樣使用的：先調用beginPath方法開啟路徑，隨後進行rect等操作添加路徑形狀，最後調用clip將路徑轉為剪裁區域。
另外為了在處理後恢復為未剪裁的最初環境，可利用Html5畫布的 save/restore 機制。save方法用於在處理前保存環境，restore方法用於在處理後回覆環境。

代碼摘錄：

// Top Left: compositeOffset
//ctx.globalCompositeOperation = "source-over";
ctx.save();
ctx.globalAlpha = alphaD;
drawRectD(ctx, blockLeft, blockTop, blockWidth, blockHeight, dColor0, dColor1);
if (useClip) {
	ctx.beginPath();
	ctx.rect(0, 0, blockWidth*2, blockHeight*2);
	ctx.clip();
}
ctx.globalCompositeOperation = compositeModeLast;
ctx.globalAlpha = alphaS;
if (null==sourceImage) {
	drawRectS(ctx, blockLeft-blockOffsetX, blockTop-blockOffsetY, blockWidth, blockHeight, sColor0, sColor1);
} else {
	ctx.drawImage(sourceImage, blockLeft-blockOffsetX, blockTop-blockOffsetY);
}
ctx.restore();

四、小結

源碼地址：
https://github.com/zyl910/zhtml5info/blob/master/src/canvas/CanvasComposite.htm

參考文獻

作者：zyl910 出處：http://www.cnblogs.com/zyl910/ 版權聲明：自由轉載-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0.
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SkiaSharp 之 WPF 自繪 彈動小球（案例版）
    沒想到粉絲對界面效果這麼喜歡，接下來就儘量多來點特效，當然，特效也算是動畫的一部分了。WPF裡面已經包含了很多動畫特效的功能支持了，但是，還是得自己實現，我這邊就來個自繪實現的。 彈動小球 彈動小球是一個很常見的頁面特效，類似於，拖動物體或者窗體，實現了抖動效果一樣。還是值得學習一二的，實際上，也很 ...
  • 05-CentOS7硬碟擴容
    CentOS7擴容 最近在練習Elasticsearch做數據插入的時候，突然發現磁碟居然占滿了！ 關於ES磁碟占用問題可以參考博客：https://blog.csdn.net/qq_16504067/article/details/119132849 擴容之前，我要提醒一下，我因為之前玩的Ubun ...
  • 《痞子衡嵌入式半月刊》 第 59 期
    痞子衡嵌入式半月刊： 第 59 期 這裡分享嵌入式領域有用有趣的項目/工具以及一些熱點新聞，農曆年分二十四節氣，希望在每個交節之日準時發佈一期。 本期刊是開源項目（GitHub: JayHeng/pzh-mcu-bi-weekly），歡迎提交 issue，投稿或推薦你知道的嵌入式那些事兒。 上期回顧 ...
  • MySQL第1章——資料庫概述
    資料庫概述 為什麼要使用資料庫 什麼是數據持久化？ 數據持久化就是把數據保存到可掉電式存儲設備中供以後使用。大多數情況下，特別是企業級應用，數據持久化意味著將記憶體中的數據保存到硬碟上加以”固化”，而持久化的實現過程大多通過各種關係資料庫來完成。 持久化的主要作用是將記憶體中的數據存儲在關係型資料庫中， ...
  • MYSQL（基本篇）——一篇文章帶你走進MYSQL的奇妙世界
    MYSQL（基本篇）——一篇文章帶你走進MYSQL的奇妙世界 MYSQL算是我們程式員必不可少的一份求職工具了 無論在什麼崗位，我們都可以看到應聘要求上所書寫的”精通MYSQL等資料庫及優化“ 那麼我們今天就先來瞭解一下MYSQL的整體佈局並且帶你掌握MYSQL的基本內容，希望能為你帶來幫助！ MY ...
  • 解決資料庫報錯Error 1390: Prepared statement contains too many placeholders的問題
    今天在開發項目時，試著一次性插入大量數據，結果出現了以下報錯： 依稀記得以前也遇到過類似的問題，於是打算記錄下錯誤原因及解決過程： 首先，這是由於sql語句中占位符數量限制導致的 Mysql預設支持的占位符最多為65535(2^16-1)個，即：寫入數據為m列，n行。m*n必須小於65535 比如你 ...
  • Jetpack Compose學習(8)——State及remeber
    原文地址: Jetpack Compose學習(8)——State狀態及remeber關鍵字 - Stars-One的雜貨小窩 之前我們使用TextField,使用到了兩個關鍵字remember和mutableStateOf,這兩個是做什麼用的呢?本篇特來補充說明下 mutableStateOf 之 ...
  • AppCode 2022 for Mac(iOS代碼編寫利器)
    AppCode是一個全新的 Objective-C的集成開發環境，幫助開發者來開發的Mac，iPhone和iPad上的iOS等系統的相關應用程式.AppCode是由大名鼎鼎的捷克JetBrAIns的公司開發，在iOS的開發者中有很高的聲譽。適用於iOS / macOS開發的智能IDE。 詳情：App ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類