2020-9-7日：Canvas 2d上下文：合成globalCompositionOperation； globalAlpha 

  • globalAlpha
    如果所有后续操作都要基于相同的透明度，就可以先把 globalAlpha 设置为适当 值；
//绘制红色矩形 
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;

 

 

  • globalCompositionOperation ；
1 source-over（默认值）：后绘制的图形位于先绘制的图形上方。 source-in：后绘制的图形与先绘制的图形重叠的部分可见，两者其他部分完全透明。 
2 source-out：后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明
3 source-atop：后绘制的图形与先绘制的图形重叠的部分可见，先绘制图形不受影响
4 destination-over：后绘制的图形位于先绘制的图形下方，只有之前透明像素下的部分才可见。
5 destination-in：后绘制的图形位于先绘制的图形下方，两者不重叠的部分完全透明
6 destination-out：后绘制的图形擦除与先绘制的图形重叠的部分。 destination-atop：后绘制的图形位于先绘制的图形下方，在两者不重叠的地方，先绘制的图形会变透明。 
7 lighter：后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮。 
8 copy：后绘制的图形完全替代与之重叠的先绘制图形。 
9 xor：后绘制的图形与先绘制的图形重叠的部分执行“异或”操作。

 

效果可查看网页：https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html；

//绘制红色矩形 
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);

描述：

不修改 globalCompositionOperation，那么蓝色矩形应该位于红色矩形之上。但把 globalCompositionOperation 设置为"destination-over"之后，红色矩形跑到了蓝色矩形上面；

 

posted @ 2020-09-07 11:28  Amber丶Li  阅读(253)  评论(0)    收藏  举报