javascript七基础学习系列一千四百六十七：合成

2D 上下文中绘制的所有内容都会应用两个属性：globalAlpha 和globalComposition Operation，
其中，globalAlpha 属性是一个范围在0~1 的值（包括0 和1），用于指定所有绘制内容的透明度，默认值为0。如果所有后来的绘制都需要使用同样的透明度，那么可以将globalAlpha 设置为适当的值，
执行绘制，然后再把globalAlpha 设置为0。比如：
// 绘制红色矩形
context.fillStyle = “#ff0000”;
context.fillRect(10, 10, 50, 50);
// 修改全局透明度
context.globalAlpha = 0.5;
// 绘制蓝色矩形
context.fillStyle = “rgba(0,0,255,1)”;
context.fillRect(30, 30, 50, 50);
// 重置
context.globalAlpha = 0;
在这个例子中，蓝色矩形是绘制在红色矩形上面的。因为在绘制蓝色矩形前globalAlpha 被设置
成了0.5，所以蓝色矩形就变成半透明了，从而可以透过它看到下面的红色矩形。
globalCompositionOperation 属性表示新绘制的形状如何与上下文中已有的形状融合。这个属
性是一个字符串，可以取下列值。
 source-over：默认值，新图形绘制在原有图形上面。
 source-in：新图形只绘制出与原有图形重叠的部分，画布上其余部分全部透明。
 source-out：新图形只绘制出不与原有图形重叠的部分，画布上其余部分全部透明。
 source-atop：新图形只绘制出与原有图形重叠的部分，原有图形不受影响。
 destination-over：新图形绘制在原有图形下面，重叠部分只有原图形透明像素下的部分可见。
 destination-in：新图形绘制在原有图形下面，画布上只剩下二者重叠的部分，其余部分完全
透明。
 destination-out：新图形与原有图形重叠的部分完全透明，原图形其余部分不受影响。
 destination-atop：新图形绘制在原有图形下面，原有图形与新图形不重叠的部分完全透明。
 lighter：新图形与原有图形重叠部分的像素值相加，使该部分变亮。
 copy：新图形将擦除并完全取代原有图形。
 xor：新图形与原有图形重叠部分的像素执行“异或”计算。
以上合成选项的含义很难用语言来表达清楚，只用黑白图像也体现不出所有合成的效果。下面来看
一个例子：
// 绘制红色矩形
context.fillStyle = “#ff0000”;
context.fillRect(10, 10, 50, 50);
// 设置合成方式
context.globalCompositeOperation = “destination-over”;
// 绘制蓝色矩形
context.fillStyle = “rgba(0,0,255,1)”;
context.fillRect(30, 30, 50, 50);
虽然后绘制的蓝色矩形通常会出现在红色矩形上面，但将globalCompositeOperation 属性的值
修改为"destination-over"意味着红色矩形会出现在蓝色矩形上面。
使用globalCompositeOperation 属性时，一定记得要在不同浏览器上进行测试。不同浏览器在
实现这些选项时可能存在差异。这些操作在Safari 和Chrome 中仍然有些问题，可以参考MDN文档上的
CanvasRenderingContext2D.globalCompositeOperation，比较它们与IE 或Firefox 渲染的差异。