Canvas in JavaScript, come iniziare, esempi

JavaScriptCopia

//recupero il canvas (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage)
var canvas = document.getElementById('sgart-canvas-1');
//ricavo il contesto per disegnare
var ctx = canvas.getContext("2d");
//pulisco la superficie
ctx.clearRect(0, 0, canvas.width, canvas.height);	

//disegno una linea rossa
ctx.beginPath();	//inizio il percorso
ctx.strokeStyle="red";	//imposto il colore del percorso (strokeStyle) con nome colore
ctx.lineWidth=3;	 //imposto lo spessore
ctx.moveTo(10,15);	//mi sposto senza disegnare
ctx.lineTo(100,75);	//disegno una linea dal punto (x:10,y:5) al punto (x:10,y:5)
//sul canvas non c'è ancora niente
ctx.stroke();	//completo il percorso e disegno la linea sul canvas		

//disegno più linee chiuse (freccia) riempite con un colore (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
ctx.beginPath();
ctx.strokeStyle="#cdc";	//imposto il colore del percorso (strokeStyle) con codice esadecimale
ctx.lineWidth=5; //imposto lo spessore
ctx.fillStyle = "rgba(255,160,0,.7)";	//imposto il colore del riempimento (fillStyle) con decimali e trasparenza (.7)
ctx.moveTo(20,10);
ctx.lineTo(70,60);
ctx.lineTo(20,100);
ctx.closePath();	//chiudo il percorso
ctx.fill();	//disegno il triangolo pieno
ctx.stroke();	//aggiungo il bordo

//disegno un rettangolo vuoto con all'interno uno pieno
//ctx.rect(x,y,w,h);
ctx.strokeStyle="rgb(0,255,0)";	//imposto il colore del percorso (strokeStyle) con codice decimale senza trasparenza
ctx.lineWidth=2;	
ctx.strokeRect(100,75, 150,80);
ctx.fillStyle = "red";
ctx.fillRect(110,80, 50,50);

//disegno un arco vuoto con all'interno uno spicchio
//ctx.arc(centerX,centerY,radius,startAngle,endAngle);
ctx.beginPath();	//inizio un nuovo path, altrimenti viene tracciata una linea che parte dall'ultimo punto disegnato
ctx.arc(350,55, 45, 0, Math.PI*2);	//disegno un cerchio vuoto (gli angoli sono espressi in radianti,  Math.PI = 180 gradi)
ctx.stroke();

ctx.beginPath();	//inizio un nuovo path, altrimenti viene tracciata una linea che parte dall'ultimo punto disegnato
ctx.arc(350,55, 40, 0, Math.PI/2);	//disegno un cerchio vuoto (gli angoli sono espressi in radianti)
ctx.lineTo(350,55);	//tiro una linea verso il centro
ctx.closePath();	//chiudo il percorso
ctx.fill();

//disegno una linea con i bordi arrotondati
ctx.beginPath();	//inizio un nuovo path, altrimenti viene tracciata una linea che parte dall'ultimo punto disegnato
ctx.fillStyle = "blue";
ctx.lineWidth=10;
ctx.moveTo(100,200);
ctx.lineTo(150,250);
ctx.lineTo(180,210);
ctx.lineCap="round";	//setto l'arrotondamento dell'inizio e fine del percorso, vertici (valori possibili: butt,round,square)
ctx.lineJoin="round";	//setto l'arrotondamento nel punto di incontro (join) delle due linee (valori possibili: bevel,round,miter)
ctx.stroke();

//disegno un testo (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text)
ctx.font = "bold 24px arial"; //imposto e l'eventuale grassetto, la dimensione e il font style (in questo ordine)
ctx.fillStyle = "red";
ctx.textAlign="center"; //centro il testo rispetto alla coordinata X (valori possibili: left,right,center,start,end)
ctx.textBaseline="bottom"; //posiziono il testo verso il basso rispetto alla coordinata Y (valori possibili: top,hanging,middle,alphabetic,ideographic,bottom)
//ctx.strokeText("text", x, y);
ctx.fillText("Sgart.it - canvas", 300, 250);	//disegno il testo alle corrdinate indicate
ctx.beginPath()
ctx.lineWidth=1;
ctx.moveTo(300,250);
ctx.lineTo(300,260);
ctx.stroke();
//disegno un altro testo con stroke 
ctx.textAlign="left";
ctx.strokeText("Sgart.it - canvas", 300, 280);	//disegno il testo alle corrdinate indicate

//adesso sposto e ruoto tutto quello che disegno
ctx.save(); //salvo il contesto (la trasformazione attuale) per poi ripristinarla
ctx.beginPath();
ctx.strokeStyle="#00FFFF";	//azzurro
ctx.translate(370, 180);	//sposto l'origine delle coordinate 
ctx.rotate(-Math.PI / 4);	// ruoto di 45 gradi
ctx.strokeRect(0,0, 150,80);	//disegno un rettangolo vuoto alle coordinate 0,0 che adesso sono nel centro
ctx.fillText("translate / rotate", 0, 0);	//disegno il testo alle corrdinate indicate, rosso
ctx.stroke()
ctx.restore()	//ripristino il contesto ai valori precedenti alla trasformazione