HOME

Contatti

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS


1 - Introduzione

Successivo


A
rgomenti correlati:


id

Attributo HTML che serve a identificare univocamente un elemento. Per questo uno stesso id non pu essere attribuito a pi di un elemento nella stessa pagina.

ESEMPIO DI SINTASSI:
<canvas id = "Primo">


document.getElementById

Restituisce l'elemento con l'identificatore indicato in parentesi.

SINTASSI: document.getElementById("identificatore")
Sostituire al posto di identificatore l'id dell'elemento a cui volete accedere.


AZIONI DI BASE

Dichiarazione

Azioni indispensabili

Sistema di riferimento

Rettangolo

Nuovo percorso

Arco e circonferenza

Segmento


SEZIONE PROVA TU


USO DEL METODO arc()

USO DEL METODO beginPath()

USO DEL METODO moveTo()

USO DEI METODI moveTo() e lineTo()

COSTRUIRE UN POLIGONO

COSTRUIRE UN RETTANGOLO

USO DEL METODO clearRect()

CHE COSA E'    

Il tag <canvas>, o tela, un elemento HTML che ha l'aspetto di un rettangolo nel quale si possono disegnare grafici, scrivere testo o manipolare immagini, generalmente con l'aiuto di javascript.

E' compatibile con Firefox, Opera, Chrome, e Safari; invece gli utenti MSIE possono visualizzare la canvas solo dalla versione 9 in poi.

La dichiarazione pi semplice consiste in

<canvas id="Primo"> </canvas>

E' indispensabile soltanto dichiarare l'id della canvas
Se non vengono indicate esplicitamente le dimensioni (tramite gli attributi width ed height) la dimensione assegnata al contenitore quella di default, un rettangolo con base 300 e altezza 150. Il rettangolo creato peraltro invisibile; per permettervi di individuarlo, quindi, preferiamo aggiungere un bordo.
Potrebbe inoltre essere buona norma aggiungere un messaggio che si visualizza solo se il browser non supporta la canvas.

Con il seguente codice:

<canvas id="Primo" width="400" height="40" style="border:1px solid maroon;"> Il tuo browser non supporta il tag HTML5 canvas.</canvas>
Otteniamo questo risultato:

NOTA BENE - possibile, in alternativa, specificare le dimensioni anche via CSS, ma siccome queste vengono applicate in un momento successivo al rendering del grafico, meglio impostarle con gli appositi attributi all'interno del tag e non via CSS.

La dichiarazione del tag canvas crea semplicemente un contenitore che dobbiamo riempire usando javascript.

A sua volta javascript necessita di due passi preliminari:

  1. memorizzare in una variabile l'identificativo della canvas;
  2. creare un contesto che permetta di lavorare con la grafica, nel nostro caso bidimensionale.

Per questo indispensabile partire da uno script tipo il seguente:

<script>
var c1 = document.getElementById('Primo');
var ctx=c1.getContext("2d");
</script>


Come in tutti i riferimenti grafici sul computer, l'origine O situata nell'angolo superiore sinistro.
Le coordinate di un punto P sono del tipo P(left, top), dove
left la distanza, in pixel, dal bordo sinistro della canvas;
top la distanza, in pixel, dal bordo in alto della canvas.

Nell'immagine a fianco rappresentato il segmento che unisce i punti A(90,70) e B(120,200) nel sistema di riferimento xy

E' chiaro che un simile sistema di riferimento inadeguato per la matematica, infatti non permette di rappresentare, a prima vista, coordinate negative o frazionarie. Vedremo comunque che possibile superare questo ostacolo con molta semplicit.


 

Successivo

IN EVIDENZA DAL SITO

 







CALCOLATRICE
SCIENTIFICA



CON SPIEGAZIONI
ED ESEMPI

 




TARTAMONDO - PER BAMBINI




AREA GIOCHI

 

 

 

 

 


www.tommasobientinesi.it

La passione per i viaggi e la natura nel nuovo sito di Tommaso Bientinesi





Guida a matematica con javascript: indice  -  Guida al tag HTML5 canvas: indice


©2002 - 2013 www.webfract.it