HTML 5 : elemento canvas & introduzione al javascript

Canvas


Il tag
<canvas id ="myCanvas" width="640" height="400">
 
il tuo browser non supporta l'elemento canvas
 
</canvas>

Coordinate sulla canvas
grid[1].jpg



Introduzione Javascript

primo esempio di javascript: metodo getElementById




<!DOCTYPE HTML>
<html>
<head>
<title>getElementById: esempio</title>
 
<script type="text/javascript">
 
//una funzione è una sezione di un programma che esegue un compito predefinito
// una funzione può essere chiamata con un parametro (una variabile)
// la funzione che segue cambia il colore di un elemento html di id="paragrafo"
// con il colore specificato tra parentesi es cambiaColore('#f00');
 
function cambiaColore(nuovoColore)
{
 elemento = document.getElementById("paragrafo");
 //document è un oggetto: un costrutto che in questo caso identifica il documento html
 // getElementById è un metodo per ottenere l'elemento indicato
 // un metodo è una operazione che effettuiamo su un oggetto in genere per modificarlo
 
 elemento.style.color = nuovoColore;
 
// style e color sono proprietà dell'elemento (in particolare il CSS)
 
}
 
function cambiaTesto(nuovoTesto)
{
 elemento = document.getElementById("paragrafo");
 elemento.style.fontFamily= nuovoTesto;
}
 
   // esempi di proprietà CSS -> proprietà Javascript
   //
   // color = color
   // background-color = backgroundColor
   // font-style = fontStyle
   // font-weight = fontWeight
 
 
 
</script>
</head>
 
<body>
<div id="paragrafo" style="border:2px solid #B7B7B7">
<h3>Lorem Ipsum Dolor sit amet</h3>
 
 
 
</div>
<!-- chiamiamo il javascript dal codice HTML con i gestori degli eventi -->
<button onclick="cambiaColore('#f80');">arancio</button>
<button onclick="cambiaColore('red');">rosso</button>
<button onclick="cambiaColore('#000');">nero</button>
 
<button onclick="cambiaTesto('Arial');">Arial</button>
<button onclick="cambiaTesto('Georgia');">Georgia</button>
</body>
</html>


demo esempio-01 getElementById (apre in nuova finestra)


Secondo esempio Javascript: disegnare sulla canvas


In questo esempio usiamo il tag Canvas per disegnare una linea

// esempio 02
// scriviamo una funzione init() (senza parametri) che conterrà tutto lo script
 
function init(){
 
 
  var canvas = document.getElementById("myCanvas");
                // document è un oggetto
                // getElementById è un metodo
                // canvas riferirà al tag di id myCanvas
 
  var ctx = canvas.getContext("2d");
 
    // getContext("2d") è un oggetto html5 per disegnare sulla canvas in 2d
    // reference http://www.w3schools.com/html5/html5_ref_canvas.asp
 
    // disegnare una linea
 
    ctx.beginPath(); // setto la partenza del mio tratto
    ctx.moveTo(100, 150); // il metodo moveTO muove il punto di partenza a 100, 150
    ctx.lineTo(450, 50);   // il metodo line disegna una linea fino al punto 450, 50
    ctx.lineWidth=[2];    // settiamo la larghezza della linea
    ctx.stroke();         //  stroke disegna (in nero se non altrimenti specificato
 };
 
 


Ecco il codice Html relativo all'esempio 2: per far partire la funzione al caricamento della pagina usiamo l'evento DHTML onLoad nel tag body, alla partenza della pagina chiama la funzione init()


<!DOCTYPE HTML>
<html>
<head>
<title> esempio 2 - disegnare sulla canvas </title>
 
 <script>
<!--
/* qui andrà lo script di sopra */
-->
 
        </script>
    </head>
    <!-- usiamo l'evento onLoad per far partire la funzione init() -->
    <body onLoad="init()">
 
        <canvas id="myCanvas" width="578" height="200">
        </canvas>
    </body>
</html>
 

ed ecco la demo funzionante

demo esempio 02 (in nuova finestra)



Primitive grafiche e metodi per il disegno sulla canvas


unica primitiva il rettangolo

fillRect(x,y,width,height) : Disegna un rettangolo pieno
strokeRect(x,y,width,height) : Disegna il contorno
clearRect(x,y,width,height) : Cancella il rettangolo specificato




Importare e diseganre immagini sulla canvas





Approfondimenti el link


Metodo getElementById

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

Canvas
http://www.w3schools.com/html5/html5_ref_canvas.asp
function init(){

init() è una funzione


var canvas = document.getElementById("myCanvas");

document è un oggetto
getElementById è un metodo

var ctx = canvas.getContext("2d");

getContext("2d") è un oggetto html5 per disegnare sulla canvas
reference http://www.w3schools.com/html5/html5_ref_canvas.asp

disegnare una linea

ctx.beginPath();
ctx.moveTo(100, 150); il metodo moveTO muove il punto di partenza a 100, 150
ctx.lineTo(450, 50); il metodo line disegna una linea fino al punto 450, 50
ctx.lineWidth=[2]; settiamo la larghezza della linea
ctx.stroke(); stroke disegna (in nero se non altrimenti specificato





};