[Html5] 用于分析26种画布合成模式(globalCompositeOperation)的演示页面

  • [Html5] 用于分析26种画布合成模式(globalCompositeOperation)的演示页面已关闭评论
  • 14 次浏览
  • A+
所属分类:Web前端
摘要

作者: zyl910Html5画布(Canvas)的上下文(Context2D)提供globalCompositeOperation属性,可用于控制图形的绘制时的合成模式。
查了一下文档,发现多达共有26种合成模式。且文字介绍很简略,部分模式看不太懂。
于是我编写了一个功能丰富的演示页面,能够随时调整globalCompositeOperation等绘制参数,且有详细信息文本框能用于分析像素合成的计算算法的等。使用该页面,能够很好的学习这26种合成模式。
本文重点介绍演示页面的功能,及开发过程中的问题处理。下一篇文章将介绍合成模式的计算算法。

作者: zyl910

一、缘由

Html5画布(Canvas)的上下文(Context2D)提供globalCompositeOperation属性,可用于控制图形的绘制时的合成模式。
查了一下文档,发现多达共有26种合成模式。且文字介绍很简略,部分模式看不太懂。
于是我编写了一个功能丰富的演示页面,能够随时调整globalCompositeOperation等绘制参数,且有详细信息文本框能用于分析像素合成的计算算法的等。使用该页面,能够很好的学习这26种合成模式。
本文重点介绍演示页面的功能,及开发过程中的问题处理。下一篇文章将介绍合成模式的计算算法。

二、合成说明与功能设计

2.1 MDN文档说明

下图是MDN的globalCompositeOperation属性的说明文档的截图。可见,对于每一种合成模式,只是用一段话做一下简介而已。
[Html5] 用于分析26种画布合成模式(globalCompositeOperation)的演示页面

文档上共列出了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] 用于分析26种画布合成模式(globalCompositeOperation)的演示页面

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

参考文献