Tworzenie HTML5 Canvas programowo

Mam następujący kod HTML fragmentyTworzenie HTML5 Canvas programowo

<body onload="main()" > 
    ... 
    <canvas id="myId" class="myClass"></canvas> 
    ... 
</body>

To działa zgodnie z oczekiwaniami. Mogę poprawnie wyświetlić wynik.

Następnie wyjąć

<canvas id="myId" class="myClass"></canvas>

Bo chcę utworzyć go programowo za pomocą następującego kodu JavaScript snippet

var canvas = document.createElement("canvas"); 
canvas.className = "myClass"; 
canvas.id = "myId";

Niestety, to nie działa. Nie mogę nic z tym wyświetlić.

Zastanawiam się, czy mogę coś przeoczyć. Każda pomoc jest doceniana. Z góry dziękuję za pomoc.

2011-01-22 pion

Musisz faktycznie dołączyć płótno do dokumentu. Zanim to zrobisz, jest to po prostu oddzielony element, którego przeglądarka nie renderuje.

var canvas = /* ... */; 
/* ... */ 
document.getElementsByTagName('body')[0].appendChild(canvas);

2011-01-22 03:23:28

@Ben, @Matt - Oba rozwiązania działają. Zagłosowano już na nich oboje. Wielkie dzięki! – pion

@pion: nie ma za co. Właśnie zauważyłem, że nasze odpowiedzi zostały opublikowane w ciągu 1 sekundy od siebie ... –

trzeba wstawić nowy <canvas> element do DOM. Aby umieścić go na końcu ciała, użyj:

document.body.appendChild(canvas);

z kodem, który ją tworzy. (Jeśli chcesz umieścić go w innym elemencie, użyj go zamiast document.body.)

2011-01-22 03:23:28

Odpowiedz