Question

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

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);

Answer 1

我想我一周有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;

在任何情况下，你都试图在小提琴中加载一个不是来自同一个原点的图像，这样就无法工作了（我在下面的小提琴中替换了图像网址，这样你就可以验证它现在是否绘制到画布上）

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

在画布上着色一个png

1 个答案: