Forum PHP.pl > [JS]Nie wyświetla zawartości znacznika canvas

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JS]Nie wyświetla zawartości znacznika canvas

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Gamoń

16.05.2012, 18:39:50

Witam. Nie wyświetla mi w żadnej przeglądarce zawartości znacznika canvas co robię źle ?

Kod

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="de.css" />
    <script src="js/custom.js"></script>
  </head>
  <body>
        dawdwadwd
    <canvas id="draw" width="500" height="300">
    Wyświetli to jak canvas nie działa
    </canvas>

  </body>
</html>

Kod

var canvas = document.getElementById('canvas');
if (canvas.getContext){

  var c = canvas.getContext('2d');

  c.beginPath();
  c.moveTo(35, 10);
  c.lineTo(60, 40);
  c.lineTo(10, 40);
  c.lineTo(35, 10);
  c.stroke();

  c.fillText('a',30,60);
  c.fillText('c',110,60);
  c.fillText('b',70,130);
}

prowseed

17.05.2012, 14:24:50

A Twój canvas jakie ma id?

//EDIT
skrypt wrzuć pod canvas na sam dół dokumentu

Gamoń

18.05.2012, 08:58:03

teraz działa, dziękuje ale czemu nie pobiera z src ?

prowseed

18.05.2012, 11:06:18

Pobiera, tylko w drzewie DOM jeszcze nie ma elementu, do ktorego sie odwolujesz tutaj:

[HTML] pobierz, plaintext 
var canvas = document.getElementById('canvas'); //oczywiscie powinno byc w Twoim przypadku ...('draw');
[HTML] pobierz, plaintext

kamil4u

18.05.2012, 11:10:25

Chodzi o to, że DOM musi być załadowany. DOM to w skrócie struktura HTML zapisana dla komputera w takiej formie, żeby mógł odnajdywać elementy( np. po id, class, itd. ). W chwili, gdy chcesz się dobrać do elementu( document.getElementById('canvas') ) ten element się jeszcze nie załadował do pamięci, więc de facto go nie ma. Rozwiązaniem jest właśnie zmiana kolejności lub zostawienie tak jak jest, a w kodzie JS:

Kod

onload = function(){
//tu już DOM jest załadowane - możesz wrzucić tu dotychczasowy kod
}

Drugi sposób jest lepszy, gdyż masz większy porządek w kodzie.

Warto dodać, że zdarzenie onload zadziała, gdy załaduje się cała strona, więc DOM, ale również obrazki i inne elementy( to wada tego rozwiązania, ale dotyczy się to głównie "ciężkich" stron ). Żeby wykona zdarzenie zaraz po załadowaniu DOM musisz... poczytać jak to się robi, bo dla starszych przeglądarek są różne metody.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.