2014-08-27 4 views
0

Почему изображение не отображается на холсте в этом примере?Почему изображение не отображается?

Код:

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<script> 
/* 
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation; 
screen.lockOrientation('landscape'); 

if (lockOrientation("landscape-primary")) { 
    screen.lockOrientation('landscape'); 
} 
*/ 
var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var x = 10; 
var y = 10; 
var width = 470; 
var height = 310; 

var imageObj = new Image(); 

    imageObj.onload = function() { 
     context.drawImage(imageObj, x, y, width, height); 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
</script> 
</head> 
<body> 
    <canvas id="myCanvas" width="470" height="310" style="border:5px solid #123456;"></canvas> 
</body> 
</html> 
+1

Попробуйте поместить сценарий непосредственно перед окончанием тэга '' – Be0wulf

+1

Проверьте ошибки консоли вашего браузера. Вы узнаете, почему. http://jsfiddle.net/oxokcL3q/ – karthikr

ответ

1

Вы должны ждать, пока документ для загрузки, прежде чем пытаться выбрать элементы на странице.

Попробуйте оборачивать код вроде этого:

window.onload = function() { 
    // your code goes here 
}; 
+0

Должен ли код всегда находиться в onload или он может быть помещен за пределы этого. Я где-то читал, что если вы поместите его в конец html-документа, который он загружает первым, или последняя загрузка страницы. Это большая проблема в разработке некоторых приложений. Вы знаете, что предпочитает Firefox OS. – 2014-08-28 00:04:40

Смежные вопросы