0

メインキャンバスのpngに色を割り当てるtintというキャンバスを追加して、キャンバス上の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 に答える