[英]how to load new image and draw it to the canvas?
我有一個圖像,我在畫布上繪制該圖像。 現在我想更改圖像的來源並再次在畫布中繪制圖像。 我已經嘗試了下面的代碼,這里是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);
}
您的問題是可變范圍。 您無法從該功能訪問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()
}
以上應該可行。
ctx是在閉包內定義的,而不是在change_2_new_image()
中定義的,這就是控制台中彈出錯誤消息ReferenceError: ctx is not defined
的原因。 修復之后,您可能還會注意到圖像有時尚未加載。 使用jQuery('load',...)事件。 有關更多信息,您可以查看此線程: 加載圖像的jQuery事件
希望有所幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.