Hypertext Markup Language (HTML) è il linguaggio che controlla come visualizzare le pagine Web. Il World Wide Web Consortium (W3C) sviluppa standard Web, inclusi quelli per l'HTML. Poiché questi standard si evolvono, il W3C aggiorna il numero della versione standard. Gli standard HTML5 aggiunto il supporto per un tag canvas. Il tag canvas HTML5 crea uno spazio per la progettazione JavaScript per HTML5 canvas. A seconda di come lo script è stato scritto, i disegni possono essere statici o dinamici. Essi possono essere codificati per interazione con l'utente, permettendo all'utente di spostare, ruotare e ridimensionare gli elementi. Per i disegni per visualizzare, l'utente deve disporre di un browser Web che supporta HTML5.

istruzione

Creazione di un documento HTML e aggiungere il tag Canvas

1 Creare un documento HTML. Impostare il tag tipo di documento per HTML5 (<! DOCTYPE HTML>).

2 Aggiungere i tag canvas di apertura e chiusura (<canvas> </ canvas>) all'interno del tag body del codice HTML.

3 Identificare la tela utilizzando l'attributo ID. Modificare la larghezza di tela e gli attributi di altezza, se si vuole un disegno in un formato diverso da quello predefinito di larghezza di 300 pixel per 150 pixel di altezza. Aggiungere una dichiarazione da visualizzare quando un browser non supporta il tag canvas, come ad esempio, "<p> Il tuo browser non visualizza HTML5 canvas. Si prega di aggiornare per visualizzare questo disegno. </ P>. "

Quanto segue è un esempio del codice:
<Canvas id = larghezza "testDesign" = "500" height = "600" style = "border: 5px rosso fisso">
<P> Il tuo browser non visualizza HTML5 canvas. Si prega di aggiornare per visualizzare questo disegno. </ P>
</ Canvas>

È stato creato una semplice pagina web che include una tela HTML5 vuoto. Per creare il vostro disegno, è necessario utilizzare JavaScript e HTML5 metodi di tela.

Aggiungere JavaScript utilizzando HTML5 Canvas Metodi

4 Aggiungere Javascript per impostare la variabile tela e contesto disegno:

var testcanvas=document.getElementById("testDesign");
var testcontext=testcanvas.getContext('2d');

5 Aggiungere Javascript per impostare il contesto disegno.

6 Aggiungere Javascript per creare gli elementi di design. È possibile creare rettangoli, cerchi e triangoli, e uso le linee, trasparenze e sfumature per creare il tuo disegno.

Ecco un esempio di codice per un rettangolo:

testcontext.fillStyle='rgb(0,125,125)';
testcontext.fillRect(10,10,250,180);

Ecco esempio di codice per un cerchio:

testcontext.beginPath();
testcontext.arc(300, 340, 100, 0, Math.PI * 2, true);
testcontext.closePath();
testcontext.fillStyle='rgb(75,10,125)';
testcontext.fill();
testcontext.stroke();

Lo script completato sarà simile al seguente:
<Script>
window.onload = function () {
var testcanvas = document.getElementById ( "testDesign");
var = testcontext testcanvas.getContext ( '2d');

// Crea rettangolo
testcontext.fillStyle = 'rgb (0.125.125)';
testcontext.fillRect (10,10,250,180);

// create circle

testcontext.beginPath ();
testcontext.arc (300, 340, 100, 0, Math.PI * 2, true);
testcontext.closePath ();
testcontext.fillStyle = 'rgb (75,10,125)';
testcontext.fill ();
testcontext.stroke ();
}
</ Script>

7 Metti alla prova il vostro disegno con l'apertura in un browser Web che supporta HTML5. Facoltativamente, prova che i browser non supportati visualizzano quel messaggio con l'apertura nel browser che non supporta HTML5.