MATEMATICA CON JAVASCRIPT - GUIDA CANVAS![]() 1 - Introduzione
Successivo |
![]() |
|
A rgomenti correlati:
|
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 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:
Per questo è indispensabile partire da uno script tipo il seguente: <script>
var c1 = document.getElementById('Primo'); var ctx=c1.getContext("2d"); </script>
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à.
|
IN EVIDENZA DAL SITO
CALCOLATRICE
TARTAMONDO - PER BAMBINI
AREA GIOCHI
![]()
|
Guida a matematica con javascript: indice - Guida al tag HTML5 canvas: indice
©2002 - 2013 www.webfract.it