Image processing 不同图像的HTML画布混合

我正在尝试为不同的图像定义不同的混合模式，就像层一样：

var canvas = document.getElementById('canvas');

var image1_ctx = canvas.getContext('2d');
var image1_obj = new Image();
image1_obj.onload = function(){
    image1_ctx.drawImage(image1_obj,0,0) ;
} ;
image1_obj.src = "../img/one.jpg" ;

var image2_ctx = canvas.getContext('2d');
var image2_obj = new Image();
image2_obj.onload = function(){
    image2_ctx.drawImage(image2_obj,0,0) ;
} ;
image2_obj.src = "../img/two.png" ;

var image3_ctx = canvas.getContext('2d');
var image3_obj = new Image();
image3_obj.onload = function(){
    image3_ctx.drawImage(image3_obj,0,0) ;
} ;
image3_obj.src = "../img/three.jpg" ;
image3_ctx.globalCompositeOperation = "multiply" ;

var image4_ctx = canvas.getContext('2d');
var image4_obj = new Image();
image4_obj.onload = function(){
    image4_ctx.drawImage(image4_obj,0,0) ;
} ;
image4_obj.src = "../img/four.jpg" ;
image4_ctx.globalCompositeOperation = "screen" ;

但“globalCompositeOperation”的最后一个定义之前已经被覆盖了。

---

是否可以为每个图像定义不同的上下文？

每个画布元素只有一个上下文，因此当您的代码执行

.getContext

时，它总是获取相同且唯一的上下文

如果要对不同的图像应用不同的

globalCompositeOperation

s，则必须将每个

globalCompositeOperation

放在它们的

drawImage

之前

但是

加载图像时可能会遇到竞争条件，因此在进行合成和绘图之前，您可能希望预加载所有图像