drawImage() не работает на холсте

вот мой код ниже. Я не могу понять, что я делаю неправильно. когда я просматриваю его, изображения нет, просто граница холста.drawImage() не работает на холсте

<!DOCTYPE html> 

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Page Title</title> 
</head> 

<canvas id="myCanvas" width="200" height="100" 
style="border:1px solid #000000;"> 
</canvas> 

<body> 

<script> 

var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var sticky = new Image(); 
sticky.src = "sticky.png"; 
sticky.onload = function() { 
context.drawImage(sticky, 0, 0); 
}; 

</script> 

</body> 
</html>

источник

2014-10-01 user3150635

ли OnLoad выполнение? Убедитесь, что sticky.png является допустимым путем к вашему изображению. – markE

, когда я использую тег html , изображение появляется, но я хочу его в javascript, чтобы я мог заставить его двигаться и прочее. Очевидно, что путь к самому изображению прекрасен, но, может быть, синтаксис в моем javascript неверен? – user3150635

Нет, ваш синтаксис в порядке ... Я подменил свое собственное изображение, и ваш точный код прошел нормально. Есть крошечная вероятность того, что у вас есть проблема с синхронизацией, поэтому попробуйте поместить .src после .onload (вряд ли что-нибудь изменить, но стоит попробовать). – markE

Консоль отображает ссылку на ваш файл. посмотрите там, если правильный

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

var canvas = document.getElementById("myCanvas"); 
 
    var context = canvas.getContext("2d"); 
 
    make_base(); 
 
    function make_base() 
 
    { 
 
     base_image = new Image(); 
 
     base_image.src = 'http://techtastico.com/files/2014/06/Apple-Swift-Logo.png'; 
 
     base_image.onload = function(){ 
 
     context.drawImage(base_image, 0, 0); 
 
     }; 
 
    }

<canvas id="myCanvas" width="200" height="100" 
 
    style="border:1px solid #000000;"> 
 
    </canvas>

источник

2014-10-01 20:57:46 AvrilAlejandro

Как ваш ответ эффективно отличается от кода вопросов? – markE

drawImage() не работает на холсте

ответ

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