Crea HTML5 Canvas programmazione

Ho il seguente codice HTML snippetCrea HTML5 Canvas programmazione

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

Esso funziona come previsto. Posso visualizzare l'output correttamente.

ho quindi rimuovere

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

Perché voglio creare a livello di codice con il seguente codice JavaScript frammento di

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

Purtroppo, non ha funzionato. Non riesco a visualizzare nulla con questo.

Mi chiedo se mi manca qualcosa. Qualsiasi aiuto è apprezzato. Grazie in anticipo per il vostro aiuto.

2011-01-22 pion

È necessario effettivamente allegare la tela al documento. Prima di farlo, è solo un elemento scollegato che il browser non esegue il rendering.

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

2011-01-22 03:23:28

@Ben, @Matt - Entrambe le soluzioni funzionano. Votato per entrambi già. Molte grazie! – pion

@pion: prego. Ho appena notato che le nostre risposte sono state pubblicate entro 1 secondo l'una dall'altra ... –

È necessario inserire il nuovo elemento <canvas> nel DOM. Per posizionarlo alla fine del corpo, utilizzare:

document.body.appendChild(canvas);

con il codice che lo crea. (Se si desidera inserirlo in un elemento diverso, utilizzare quello invece di document.body.)

2011-01-22 03:23:28

risposta