Почему мой образ не отображается на холсте?

Я пытаюсь показать изображение на холсте в верхнем углу, и функция рисования работает неправильно. Что я сделал не так.Почему мой образ не отображается на холсте?

enter image description here

На рисунке выше, что я хочу, чтобы показать на экране.

<html> 
<head> 
<title></title> 
</head> 

<body> 
<p><canvas id="canvas" style="border:1px solid black;" width="450" height="310"></canvas> 
</body> 


<script> 
    var c=document.getElementById("canvas"); 
    var ctx=c.getContext("2d"); 


    draw(); 

    function draw(){ 
     var img = new Image(); 
     img.src = "t.gif"; 
     ctx.drawImage(img,0,0); 
    } 
</script> 

</html>

источник

2014-09-06 Anonymous

Вы хотите, чтобы показать "OPEN4HOURS", но вы добавляете "Royal Flush", "Striaght Flush" ?! – idmean

@ chipChocolate.py Это работает, потому что браузер имеет изображение в кеше. Но если вы откроете скрипку в частном окне, это не сработает. – Oriol

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

Попробуйте вместо этого:

function draw(){ 
    var img = new Image(); 
    img.onload = function() { 
     ctx.drawImage(img,0,0); 
    }; 
    img.src = "t.gif"; 
}

источник

2014-09-06 22:01:20 Oriol

Вы должны нарисовать изображение после того, как он будет загружен

img.onload = function() { 
    // here... 
};

источник

2014-09-06 22:03:12 AskarovBeknar

Почему мой образ не отображается на холсте?

ответ

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