0

我想通过添加一个名为 tint 的画布来为画布上的 png 着色，它将颜色分配给主画布上的 png。但根本没有绘制任何内容：

js 菲德尔代码

js

var tint = document.createElement('canvas');
    tint.width = 20;
    tint.height = 20;
    var tintCtx = tintCanvas.getContext('2d');

var canvas = document.getElementById('canvasA');       
var ctx = canvas.getContext('2d');



var pic = new Image();
pic.src = 'http://i3.minus.com/jUyvRw7sMVxJL.png';

var x =0;
var y=0;

tintCtx.fillStyle = #ff3633;
tintCtx.fillRect(x,y,20,20);
tintCtx.globalCompositeOperation = "destination-atop";
tintCtx.drawImage(pic, x, y);

ctx.drawImage(pic, x, y);
ctx.globalAlpha = 0.5;
ctx.drawImage(tint, x, y);
4

1 回答 1

2

我想我每周会看到这个问题 2-3 次。您需要从 pic.onload 事件中绘制图像，因为它异步加载图像 - pic.src 下面的代码在图像加载之前执行。

我只是重新安排代码以显示您需要绘制的位置：

var tint = document.createElement('canvas');
tint.width = 20;
tint.height = 20;
var tintCtx = tintCanvas.getContext('2d');

var canvas = document.getElementById('canvasA');       
var ctx = canvas.getContext('2d');

var pic = new Image();
pic.onload = function() {
    tintCtx.fillStyle = #ff3633;
    tintCtx.fillRect(x,y,20,20);
    tintCtx.globalCompositeOperation = "destination-atop";
    tintCtx.drawImage(pic, x, y);

    ctx.drawImage(pic, x, y);
    ctx.globalAlpha = 0.5;
    ctx.drawImage(tint, x, y);

}
pic.src = 'http://i3.minus.com/jUyvRw7sMVxJL.png';

var x =0;
var y=0;

在任何情况下，您都尝试在小提琴中加载不是来自同一来源的图像，这样就无法正常工作（我在下面的小提琴中替换了图像 url，以便您可以验证它现在是否绘制到画布上）。

工作示例：http:
//jsfiddle.net/AbdiasSoftware/Br3SB/5/

于 2013-06-01T23:11:35.780 回答