0

画像があり、その画像をキャンバスに描画します。ここで、画像のソースを変更して、キャンバスに画像を再度描画したいと考えています。以下のコードを試してみましたが、ここにjsfiddlerがあります。キャンバスの描画が変化しません...どうすればいいですか?

HTML

<button onclick="change_2_new_image();">change_image()</button>  
<img id="test" src="http://static.clickbd.com/global/classified/item_img/374646_0_original.jpg" alt="error" title="This is an image" />
<canvas id="myCanvas" width="320px" height="275px"><canvas>

JS

    var img;
$(function () {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    img = document.getElementById("test");
    img.ready = function () {
        alert("asasas");
    };
    ctx.drawImage(img, 0, 0);

});

function change_2_new_image() {

    $('#test').attr("src", "http://upload.wikimedia.org/wikipedia/en/9/9a/Grameenphone_Logo.png");
    img = document.getElementById("test");
    ctx.drawImage(img, 0, 0);
}
4

2 に答える 2

1

ctx はクロージャー内で定義されており、定義されていないため、コンソールにchange_2_new_image()エラーメッセージが表示されます。ReferenceError: ctx is not definedそれを修正した後、画像がまだロードされていないことがあります。jQuery の on('load', ... ) イベントを使用します。詳細については、次のスレッドを参照してください: jQuery event for images loaded

それが役立つことを願っています!

于 2013-08-15T03:37:39.090 に答える