Il tag canvas di HTML 5 consente di visualizzare una casella in cui gli utenti possono utilizzare un mouse per creare disegni in canvas. Si utilizza il tag canvas di HTML 5 insieme con il linguaggio JavaScript per creare lo strumento di disegno. Il browser dell'utente deve supportare lo strumento di tela per il codice di funzione; Firefox, Opera, Chrome e Internet Explorer supportano il tag canvas.
Istruzioni
1
Pulsante destro del mouse il file della pagina Web HTML e fare clic su "Apri con". Fare clic su editor HTML preferito nell'elenco dei programmi.
2
Aggiungere il tag canvas al codice. È possibile aggiungere la tela ovunque all'interno del tag body. Aggiungere il seguente codice per il tag body HTML:
< tela id = "disegno" width = "400" height = "400" >
Il tuo browser non supporta lo strumento di tela.
< / tela >
Il testo all'interno dei tag viene visualizzato solo se il browser dell'utente non supporta il tag canvas.
3
Aggiungere il codice JavaScript per il supporto di disegno con il mouse. Copiare e incollare lo script seguente per aggiungere il supporto di disegno:
Function draw(m) () {
x = m.layerX;
y = m.layerY;
Se (! iniziato) {
context.beginPath();
context.moveTo(x, y);
started = true;
} else {
context.lineTo(x, y);
context.stroke();
}
4
Aggiungere il collegamento alla funzione JavaScript nella definizione di tag canvas. I trigger di funzione quando l'utente fa clic con il mouse e sposta il mouse sopra l'utilità di tela. Aggiungere il seguente codice per la definizione di tag canvas:
OnMouseMove="Draw(this)"
5
Salvare le modifiche al file e aprire il file nel browser Web. La tela viene caricato e viene visualizzato nella finestra di pagina Web.
6
Passa il mouse sopra la tela. Fare clic sul pulsante sinistro del mouse sopra l'area di disegno e trascinare il mouse attraverso la tela. Una linea nera disegna sulla tela come il mouse si muove attraverso la casella di tela.