Холст DrawImage() не работает

Question

Этот Javascript код Жеребьевка часть изображения на холсте:

var img = document.getElementById('img'); 
var canvas = document.getElementById('can'); 
//canvas.width = img.width; 
//canvas.height = img.height; 
var ctx = canvas.getContext("2d"); 
ctx.drawImage(img, 0, 0); 

Но когда я раскомментировать средние линии, чтобы установить ширину холста и высоту, то DrawImage() не работает , Что я должен проверить, чтобы найти проблему?

Answer 1

var img = document.getElementById('img'); 

Попробуйте присвоить переменной что-то еще. Также убедитесь, что загружено какое-то изображение.

Попробуйте мою скрипку http://jsfiddle.net/aliasm2k/tAum2/ больше идей

Answer 2

Вы должны ожидания для браузера, чтобы загрузить изображение.

Используйте onload событие, если изображение еще не было загружено и изменить код, чтобы что-то вроде этого:

var img = document.getElementById('img'); 
var canvas = document.getElementById('can'); 
var ctx = canvas.getContext("2d"); 

var callback = function(image) { 
    if(!image) image = this; 
    canvas.width = img.width; 
    canvas.height = img.height; 
    ctx.drawImage(image, 0, 0); 
} 

if(img.complete) { //check if image was already loaded by the browser 
    callback(img); 
}else { 
    img.onload = callback; 
} 

See this working demo

Answer 3

ширина и высота атрибутов изображения не установлены до тех пор, пока изображение не станет поэтому я предлагаю вам поместить ваш код в событие onLoad().