HyperText Markup Language è principalmente usato per organizzare il testo, immagini e contenuti multimediali nelle pagine Web. Tuttavia, oltre a una serie di altri importanti miglioramenti, il nuovo standard HTML5 consente di produrre arbitrari 2D disegni sui siti Web con codice HTML e JavaScript. Disegnare un triangolo in HTML con l'elemento canvas con codice JavaScript.

Istruzioni

1

Inserire la funzione JavaScript seguente tra i tag head del documento HTML:

< script type = "text/javascript" >

Function drawTriangle(canvasid) () {

var canvas = document.getElementById(canvasid);

var context = canvas.getContext("2d");

context.moveTo(10,4);

context.lineTo(180,190);

context.lineTo(15,150);

context.closePath();

context.stroke();

}

< / script >

Cambiare le coordinate dei vertici del triangolo in chiamate al metodo "moveTo" e "lineTo". L'angolo superiore sinistro di un elemento canvas è l'origine del suo sistema di coordinate.

2

Aggiungere l'attributo "onLoad" al tag body del documento HTML di chiamare "drawTriangle" quando la pagina viene caricata. Qui è un'etichetta di corpo di esempio:

< corpo onLoad="drawTriangle('canvas1');" >

3

Aggiungere un elemento canvas al corpo del documento HTML, suo attributo "id" a quello utilizzato nella chiamata a corrispondente "drawTriangle:"

< tela id = "canvas1" width = "200" height = "200" >< / tela >

Regolare gli attributi "larghezza" e "altezza" come necessario per adattare il vostro triangolo.

4

Salvare la pagina e caricarlo in un browser Web. Il triangolo appare nell'elemento canvas nella pagina.

Consigli & Avvertenze

• Aggiungere il seguente tag all'inizio del documento HTML..--prima del primo tag html - per garantire la compatibilità dell'elemento canvas con Internet Explorer 9:
• <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 / / EN" "l'http://www.w3.org/TR/html4/strict.dtd" >
• Utilizzare il metodo di "riempimento" dell'oggetto di contesto per disegnare un triangolo solido.
• Assegnare colori alle proprietà dell'oggetto di contesto per cambiare il colore del vostro triangolo "strokeStyle" e/o "fillStyle".