Question

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

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”的最后一个定义是覆盖之前。是否可以为每个图像定义不同的颜色？

Answer 1

每个canvas元素只有1个上下文，所以当你的代码执行.getContext时，它始终会获取相同的唯一上下文。

如果您要将不同的globalCompositeOperation应用于不同的图片，则必须将每个globalCompositeOperation放在drawImage之前。

但是...

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

用于不同图像的HTML Canvas Blendings

1 个答案: