MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

1 - Introduzione

Successivo

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()

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

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:

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:

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

Successivo

IN EVIDENZA DAL SITO

CALCOLATRICE
SCIENTIFICA


CON SPIEGAZIONI
ED ESEMPI

TARTAMONDO - PER BAMBINI

AREA GIOCHI