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。

function change_2_new_image() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    $('#test').attr("src", "http://upload.wikimedia.org/wikipedia/en/9/9a/Grameenphone_Logo.png");
    img = document.getElementById("test");
    ctx.drawImage(img, 0, 0);
    ctx.render()
}

以上现在应该可以工作了。

于 2013-08-15T03:37:36.597 回答
1

ctx 是在您的闭包内定义的，而不是在控制台中弹出change_2_new_image()错误消息的原因中定义的。ReferenceError: ctx is not defined修复此问题后，您可能还会注意到图像有时尚未加载。使用 jQuery 的 on('load', ... ) 事件。有关更多信息，您可以查看此线程：加载图像的 jQuery 事件

希望有帮助！

于 2013-08-15T03:37:39.090 回答