изображение не отображается на страницах github

Я написал простой HTML-файл, чтобы поместить изображение в холст. Он работает на localhost, но не на страницах github.изображение не отображается на страницах github

Изображение starry-night.jpg находится в этой же папке.

<!DOCTYPE html> 
<meta charset="utf-8"> 
<body> 

<canvas id="vincent"></canvas> 

<script> 

     var width = 960; 
     var height = 500; 
     var canvas = document.getElementById('vincent'); 
     var ctx = canvas.getContext("2d"); 
     canvas.width = width; 
     canvas.height = height; 

     var image = new Image(); 
     image.src= "starry-night.jpg"; 
     ctx.drawImage(image, 0, 0); 

     console.log("done"); 

</script> 

</body>

Вот ссылка на него не работает: http://monsieurcactus.github.io/LearnElm/canvas-example.html

Вот фрагмент также не работает:

 var width = 960; 
 
     var height = 500; 
 
     var canvas = document.getElementById('vincent'); 
 
     var ctx = canvas.getContext("2d"); 
 
     canvas.width = width; 
 
     canvas.height = height; 
 

 
     var image = new Image(); 
 
     image.src= "http://monsieurcactus.github.io/LearnElm/starry-night.jpg"; 
 
     ctx.drawImage(image, 0, 0); 
 

 
     console.log("done");

<canvas id="vincent"></canvas>

источник

2016-06-09 john mangual

Установка источника в изображения в с ЦСИ атрибут делает b rower для запуска HTTP-запроса для получения изображения и вам нужно подождать, пока изображение будет загружено перед его рисованием. Как это:

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<body> 
 

 
<canvas id="vincent"></canvas> 
 

 
<script> 
 

 
    var width = 960; 
 
    var height = 500; 
 
    var canvas = document.getElementById('vincent'); 
 
    var ctx = canvas.getContext("2d"); 
 
    canvas.width = width; 
 
    canvas.height = height; 
 

 
    var image = new Image(); 
 
    image.src= "http://monsieurcactus.github.io/LearnElm/starry-night.jpg"; 
 

 
    image.onload = function() { 
 
     ctx.drawImage(image, 0, 0); 
 
     console.log("done"); 
 
    } 
 

 
</script> 
 

 
</body>

Примечание: Здесь нужен абсолютный адрес, потому что этот пример обслуживаются вне monsieurcactus.github.io/LearnElm/

источник

2016-06-09 02:38:40 helloworld111

изображение не отображается на страницах github

ответ

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