^^Canvas instructions.

  ctx.fillStyle = "rgb(, , )";


ctx.strokeStyle = "rgb(, , )";
 
  ctx.lineWidth = float_nr;  default 1.0


  ctx.fillRect(x, y, w, h);

ctx.strokeRect(x, y, w, h);

 ctx.clearRect(x, y, w, h);


ctx.fillText("testo", x, y);

ctx.font = "normal bold 24px Arial, sans-serif";

ctx.measureText("testo").width;
 
 
ctx.beginPath();

ctx.moveTo(x,y);

ctx.lineTo(x,y);

ctx.closePath();

ctx.stroke();

ctx.fill();
 

 

Istruzioni javascript

 

    for( ; ; ) {   }
 
    switch (cs) {
        case 0: 
        break;
        case 1:    
        break;
        case 2:  
        break;
    }
 
  

Significato parole

fill   = figura riempire
stroke = figura contorno

Style

  ctx.fillStyle = "rgb(, , )";    
ctx.strokeStyle = "rgb(, , )";
                  "rgba(, , , );  a alpha channel (trasparenza, da 0 a 1)

Rettangoli >>>

  ctx.fillRect(x, y, w, h);
ctx.strokeRect(x, y, w, h);
 ctx.clearRect(x, y, w, h);
x posizione orizzontale.  w width
y posizione verticale.    h height
(x,y) e' la posizione del vertice di riferimento.
Il vertice di riferimento e' in alto a sinistra (se w e h positivi).
Width & height dei rettangoli possono essere negativ.

Testo

ctx.fillText("testo",x, y);         // stringa di testo, xpos, ypos
ctx.font = "normal bold 24px Arial, sans-serif";
ctx.measureText("testo").width;     // lunghezza del testo in pixel
 

Paths >>>

ctx.beginPath();
 per iniziare un path 
ctx.moveTo(x,y);
 posiziona il punto-punta senza scrivere 
ctx.lineTo(x,y);
 traccia segmento dalla posizione attuale alla nuova-dichiarata 
ctx.closePath();
 chiude il cammino al punto iniziale, se necessario-voluto 
ctx.stroke();
 linea sul cammino 
ctx.fill();
 riempimento del path inteso come contorno. In alternativa a "linea"

Canvas

cv = document.getElementById("identificatore_canvas");

cv variabile javascript per rappresentare la canvas html

ctx = cv.getContext("2d");
 ctx variabile javascript per rappresentare il contesto di disegno nella canvas 
cvw = cv.width;
 assegna alla var cvw la larghezza della canvas 
cvh = cv.height;
 assegna alla var cvh l'altezza della canvas 
cv.width = 200;
 fa la canvas larga 200 pixel 
cv.height = 300;
 fa la canvas alta 300 pixel 
cv.style.backgroundColor = "rgb(, , )";
 assegna il colore di sfondo alla canvas, e la dipinge.

Sistema di riferimento cartesiano della canvas

canvas e' concepita come un continuo. >>>