1

私のプロジェクトの 1 つで、次のコードを使用して、JavaScript を使用して html5 キャンバスに png 画像をレンダリングすることに成功しました。

var sizeIcon = new Image();
sizeIcon.draw = function() {
    ctx.drawImage(sizeIcon, tooltip.x + 10, tooltip.y + 10);
};

sizeIcon.onload = sizeIcon.draw;
sizeIcon.src = "./images/icons/ruler.png";
tooltip.icons.push(sizeIcon);

ロードするアイコンが複数あるため、次の関数を実装しました。

var imageLoader = function(x, y, src) {
    var image = new Image();
    image.draw = function() {
        ctx.drawImage(image, x, y);
    };

    image.onload = image.draw;
    image.src = src;
    tooltip.icons.push(image);
};

imageLoader(tooltip.x + 10, tooltip.y + 10, "./images/icons/ruler.png");

tooltip.icons はグローバルにアクセス可能な配列です。この関数は何もしません (コンソールにエラーも警告も表示しません)。tooltip.icons[n] = new Image();また、成功しない (where )のようなものを使用して、tooltip.icons 配列を直接埋めようとしましたn = tooltip.icons.length。私が理解していない JavaScript スコープの一部がおそらくあります。

4

1 に答える 1

1

画像の読み込みは非同期であり、(ほとんどの場合) が呼び出される前に関数が終了するため、コールバック ハンドラーに到達すると、基本的にオブジェクトを無効にする危険がありimageます (利用できない場合など) onload。

次のように少し切り替えてみてください。

var imageLoader = function(x, y, src) {

    var image = new Image();

    function draw() {
        // use *this* here instead of image
        ctx.drawImage(this, x, y)
    };

    image.onload = draw;
    image.src = src;

    tooltip.icons.push(image);
};

ここでの小さなハックの代わりに、座標 (および URL) を配列に格納し、それを反復処理することができます。

于 2013-09-11T00:29:17.117 に答える