如果在画布中绘制有多个交叉点的图形，则需要根据绘制时的先后顺序显示每个图形，在交叉处新绘制的图形会覆盖原有图形。如果想要改变这种默认多图组合的显示形式，可以通过修改上下文环境对象的“globaICompositeOperation”属性值来实现，此属性有多个属性值。具体说明如下。
■source-over：显示图形时，新绘制的图形覆盖原先绘制的图形，这是默认值。
■copy：只显示新图形，其他部分作透明处理。
■darker：两种图形都显示，在图形重叠部分，颜色由两个图形的颜色值相减后形成。
■destination-atop：只显示新图形中与原图形重叠部分及新图形的其余部分，其他部分作透明处理。
■destination-in：只显示原图形中与新图形重叠部分，其他部分作透明处理。
■destination-out：只显示原图形中与新图形不重叠部分，其他部分作透明处理。
■destination-over：与“Source-over”属性相反，原先绘制的图形将覆盖新绘制的图形。
■lighter：两种图形都显示，在图形重叠部分，颜色由两个图形的颜色值相加后形成。
■source-atop：只显示原图形中与新图形重叠部分及原图形的其余部分，其他部分作透明处理。
■source-m：只显示新图形中与原图形重叠部分，其他部分作透明处理。
■source-out：只显示新图形中与原图形不重叠部分，其他部分作透明处理。
■xor：两种图形都绘制，并透明处理图形重叠部分。
其中，“source”表示新图形资源，“destination”表示原图形资源。
下面将通过一个实例讲解在网页中使用组合的方式显示图形的方法。(www.xing528.com)
在本实例的页面中新建了一个<canvas>元素，当页面被加载时调用自定义的函数pageload（），通过该函数创建一个正方形和圆形，将两个图形组合后的“globalComposite Operation”的属性值设为“lighter”，并将组合后的图形结果显示在画布中。实例文件11.html的代码如下。
编写脚本文件js11.js，首先自定义了两个函数drawRect（）与drawCirc（），分别用于根据设置的上下文环境参数值，绘制正方形与圆形。当加载页面时触发页面的“onLoad”事件，在该事件中调用另一个自定义函数pageload（）。此函数的运作流程如下：
（1）通过ID号获取画布元素<canvas>，并根据画布元素取得上下文环境对象“cxt”。
（2）传递“cxt”对象，调用函数drawRect（）在画布中先绘制一个正方形。
（3）设置“globaICompositeOperation”属性值为“lighter”，表明与下面图形组合时的显示方式。
（4）调用函数drawCirc（）在画布中绘制一个圆形，两个图形的重叠部分将按照设置的“globalCompositeOperation”属性值进行组合显示。
文件js11.js的代码如下。
执行后的效果如图6-11所示。
图6-11 执行效果
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
