Холст не показан

Я хочу нарисовать изображение с холстом. Но изображение не появляется. Если я попробую этот код в JSFiddle, он будет работать. Я надеюсь, что вы можете мне помочь. Вот мой сценарий:Холст не показан

window.onload = function() { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    var img = new Image(); 

    imageObj.onload = function() { 
     ctx.drawImage(img, 0, 0); 
    }; 
    img.src = "http://imageshack.us/a/img19/1158/tx2a.png"; 
};

Это, как поместить мой холст в HTML-:

<canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas>

И это работает Fiddle: http://jsfiddle.net/5P2Ms/454/

Я надеюсь, что вы можете мне помочь!

Полный новый HTML код:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
</head> 
<body> 


<script> 
var can = document.getElementById('myCanvas'); 
var ctx = can.getContext('2d'); 

var img = new Image(); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
} 
    img.src = "http://imageshack.us/a/img19/1158/tx2a.png"; 
</script> 


<canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas> 

</body> 
</html>

источник

2013-08-18 Christoph Beylage

Как я знаю, OnLoad() не поддерживается холст тега. http://www.w3schools.com/jsref/event_onload.asp –

Нет, ошибок нет. И я нашел это onload() во многих примерах. Вы уверены, что это не сработает? –

@ChristophBeylage вы написали imageObj.onload. Измените его на img.onload и попробуйте. Это должно работать, по крайней мере, работало на моем местном. –

В вашем полном html-файле не было window.onload. Это проблема

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
</head> 
<script type="text/javascript"> 
window.onload = function(){ 
var can = document.getElementById('myCanvas'); 
var ctx = can.getContext('2d'); 

var img = new Image(); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
} 
    img.src = "http://imageshack.us/a/img19/1158/tx2a.png"; 
} 
</script> 
<body> 

<canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas> 

</body> 
</html>

источник

2013-08-18 14:17:45

Спасибо! Это работает! :) –

Christoph вы также можете просто поместить тег

Довольно уверен, что imageObj.onload ваша проблема:

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
var img = new Image(); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
}; 
img.src = "http://imageshack.us/a/img19/1158/tx2a.png";

Это работает в JSFiddle с HTML. Проблема заключается в том, что вы вызываете onload на несуществующий объект, где, я думаю, вы хотите запустить его на изображении, которое вы создаете для переменной img.

Обновление: Этот HTML-код должен загрузить img для вас.

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Insert title here</title> 
</head> 
<body> 
    <script> 
     window.onload = function() { 
      var can = document.getElementById('myCanvas'); 
      var ctx = can.getContext('2d'); 
      var img = new Image(); 
      img.onload = function() { 
       ctx.drawImage(img, 0, 0); 
      } 
      img.src = "http://imageshack.us/a/img19/1158/tx2a.png"; 
     } 
    </script> 
    <canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas> 
</body> 
</html>

источник

2013-08-18 13:57:42

Если я использую этот скрипт, ничего не отображается: S –

http://jsfiddle.net/bjarkehs/7rPpQ/ Здесь все как JSFiddle –

Такая же проблема с моим кодом. в JSFiddle, но это не сработает, когда я создаю свой собственный html-документ :( –

Ваша проблема вы пытаетесь использовать холст в сценарии, прежде чем объявить его в HTML (доступ к сценарию, но HTML-парсер не загружен этому элемент). Итак, в этом случае document.getElementById('myCanvas') имеет значение null, а can.getContext('2d') вызывает ошибку исключения с сообщением «can is null». Чтобы решить это, вам нужно поставить <canvas ...></canvas> перед этим скриптом, который обращается к этому элементу или выполняет этот скрипт, когда весь контент анализируется и загружается точно так же, как «Bjarke H. Søndergaard» и «B.K.». предложил.

Я надеюсь, что это поможет вам.

источник

2013-08-18 14:48:56

Невероятно, что никто не говорит, что для отображения диаграммы мы также должны включить chart.js! Просто добавьте это, и это будет работать:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

источник

2017-07-13 07:17:07

Холст не показан

ответ

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