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 渲染的差异。
javascript七基础学习系列二千七百六十七:合成
最新推荐文章于 2024-10-18 17:51:23 发布