《HTML5 canvas开发详解（第2版）》——2.6　在画布上合成

本节书摘来自异步社区《HTML5 canvas开发详解（第2版）》一书中的第2章，第2.6节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.6　在画布上合成

合成是指如何精细控制画布上对象的透明度和分层效果。有两个属性可以控制Canvas合成操作：globalAlpha和globalCompositeOperation。

globalAlpha：globalAlpha Canvas属性的默认值为1.0（完全不透明），并且可以设置从0.0（完全透明）～1.0的值。这项Canvas属性必须在图形绘制之前设置。globalCompositeOperation：globalCompositeOperation的值在globalalpha以及所有变换都生效后控制在当前canvas位图中绘制图形。在下面的列表中，“源图形”是指要绘制在画布上的形状，“目标图形”是指显示在画布上的位图。Copy：二者重叠，显示源图形而不显示目标图形。destination-atop：目标图形位于源图形上，二者重叠且都不透明的地方显示目标图形，源图形不透明而目标图形透明的地方显示源图形，其余显示透明。destination-in：目标图形在源图形内，二者都不透明的地方显示目标图形，其余显示透明。destination-out：目标图形在源图形外，目标图形不透明而源图形透明的地方显示目标图形，其余显示透明。destination-over：目标图形覆盖源图形，目标图形不透明的地方显示目标图形，其余显示源图形。lighter：源图形加目标图形，显示源图形和目标图形之和，色值趋近于1.0。source-atop：源图形在目标图形之上，二者重叠且都不透明的地方显示源图形，目标图形不透明而源图形透明的地方显示目标图形，其余显示透明。source-in：源图形在目标图形内，二者都不透明的地方显示源图形，其余显示透明。source-out：源图形在目标图形外，源图形不透明而目标图形透明的地方显示源图形，其余显示透明。source-over：（默认）源图形覆盖目标图形，源图形不透明的地方显示源图形，其余显示目标图形。xor：源图形xor目标图形，即异或源图形和目标图形。

例2-6显示了这些值如何影响形状绘制，结果如图2-11所示。

例2-6　Canvas合成示例 function drawScreen(){ 　　　//在屏幕上绘制一个大方块 　　　context.fillStyle = "black"; // 　　　context.fillRect(10, 10, 200, 200); 　　　//保留 globalCompositeOperation 原有值不变 　　　//现在绘制一个红色正方形 　　　context.fillStyle = "red"; 　　　context.fillRect(1, 1, 50, 50); 　　　//现在设置为source-over 　　　context.globalCompositeOperation = "source-over"; 　　　//在旁边再画一个红色正方形 　　　context.fillRect(60, 1, 50, 50); 　　　//现在设置为destination-atop 　　　context.globalCompositeOperation = "destination-atop"; 　　　context.fillRect(1, 60, 50, 50); 　　　//现在设置globalAlpha 　　　context.globalAlpha = .5; 　　　//现在设置为source-atop 　　　context.globalCompositeOperation = "source-atop"; 　　　context.fillRect(60, 60, 50, 50); }

https://yqfile.alicdn.com/42e1707ce9688197e950acb98a7f81910cf20683.png" > 提示 不幸地是，context.globalCompositeOperation = "destinationatop"在浏览器上不能再正常使用了。 如例2-6所示，这里测试了globalCompositeOperation和globalAlpha Canvas属性。当指定字符串为sourceover时，实际上是将globalCompositeOperation重设回默认值。然后创建了几个红色方形来显示不同的合成选项和组合。注意，destination-atop切换到当前Canvas位图之下的新绘制形状，globalAlpha属性只影响设置之后所画的形状。这意味着，不必为绘制新的形状设定新的透明度而使用save()和restore() Canvas对状态进行操作。

本书将在2.7节讲解一些影响整个画布的变换。因此，如果要变换新绘制的形状，必须使用save()和restore()函数。