Nwlapcug.com


Come disegnare su tela utilizzando un Mouse in formato HTML

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.