Tutorial di base HTML5

API HTML5

Media HTML5

Grafica HTML5

Canvas HTML5

Il tag <canvas> è stato aggiunto a HTML5, un elemento HTML che può essere utilizzato per disegnare immagini all'interno di script (solitamente JavaScript). Può essere utilizzato per creare album di foto o animazioni semplici (o non così semplici), persino per il trattamento e la rendering di video in tempo reale.

Il tag <canvas> definisce grafici, come grafici e altre immagini, devi utilizzare script per disegnare grafici.

Disegnare un rettangolo rosso, un rettangolo di gradiente, un rettangolo colorato e alcune scritture colorate sulla superficie del canvas.

Cos'è canvas?

L'elemento <canvas> di HTML5 è utilizzato per disegnare grafici, completato tramite script (solitamente JavaScript).

Il tag <canvas> è solo un contenitore per immagini, devi utilizzare script per disegnare grafici.

Puoi utilizzare vari metodi per disegnare tracciati, caselle, cerchi, caratteri e aggiungere immagini con canvas.

Supporto del browser

I numeri nella tabella rappresentano la versione del browser di supporto per l'elemento <canvas>.

elemento
Descrizione	4.0	9.0	2.0	3.1	9.0

Creare un riquadro di disegno (Canvas)

Un riquadro di disegno in una pagina web è un rettangolo, disegnato tramite l'elemento <canvas>.

Attenzione: Per impostazione predefinita, l'elemento <canvas> non ha bordi e contenuto.

<canvas>è un esempio semplice di utilizzo:

<canvas id="myCanvas" width="200" height="100"></canvas>

Attenzione: Il tag di solito deve specificare un attributo id (frequentemente citato nei script), Le proprietà width e height definiscono la dimensione del riquadro di disegno.

Suggerimento:Puoi utilizzare più elementi <canvas> in una pagina HTML.

Aggiungi bordi utilizzando l'attributo style:

Esempio

<!DOCTYPE html><html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Website (oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
</script>
</body>

</html>

Disegnare immagini utilizzando JavaScript

L'elemento canvas in sé non ha capacità di disegno. Tutta la lavoro di disegno deve essere completato all'interno di JavaScript:

Esempio

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Lezione di base(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Il tuo browser non supporta il tag HTML5 canvas.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
}
</script>
</body>

</html>

Esempio di spiegazione:

Prima di tutto, trova l'elemento <canvas>:

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

Poi, crea l'oggetto context:

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

L'oggetto getContext("2d") è un oggetto integrato HTML5 che offre vari metodi di disegno di percorsi, rettangoli, cerchi, caratteri e aggiunta di immagini.

Le due righe di codice seguenti disegnano un rettangolo rosso:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

L'impostazione della proprietà fillStyle può essere un colore CSS, una progressione o un motivo. fillStyle L'impostazione predefinita è #000000 (nero).

fillRect(x,y,larghezza,altezzaIl metodo definisce il modo di riempimento attuale del rettangolo.

Coordinate del canvas

Il canvas è una griglia bidimensionale.

Le coordinate dell'angolo in alto a sinistra del canvas sono (0,0)

Il metodo fillRect sopra ha i parametri (0,0,150,75).

Il significato è: disegnare un rettangolo di 150x75 sul riquadro di disegno, iniziando dall'angolo in alto a sinistra (0,0).

Esempio di coordinate

Come mostrato nell'immagine sottostante, le coordinate X e Y del riquadro di disegno vengono utilizzate per posizionare il disegno sul riquadro di disegno. La casella rettangolare che si muove sul mouse mostra le coordinate di posizionamento.

Canvas - Percorso

Per disegnare linee su Canvas, utilizzeremo i seguenti due metodi:

moveTo(x,y) Definisce il punto di partenza della linea
lineTo(x,y) Definisce il punto di arrivo della linea

Per disegnare linee, dobbiamo utilizzare il metodo "ink", come stroke().

Esempio

Definisci il punto di partenza (0,0) e il punto di arrivo (200,100). Poi utilizza il metodo stroke() per disegnare la linea:

JavaScript:

Esempio

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Lezione di base(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
}
</script>
</body>

</html>

Per disegnare cerchi su canvas, utilizzeremo i seguenti metodi:

arc(x,y,r,start,stop)

In effetti, quando disegniamo cerchi, utilizziamo il metodo "ink", ad esempio stroke() o fill().

Esempio

Disegna un cerchio utilizzando il metodo arc():

JavaScript:

Esempio

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Lezione di base(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
}　
</script>
</body>

</html>

Canvas - Testo

Quando si disegna testo su canvas, le proprietà e i metodi importanti sono i seguenti:

font - Definisce il font
fillText(text,x,y) - Disegna il testo riempito su canvas
strokeText(text,x,y) - Disegna il testo vuoto su canvas

Utilizza fillText():

Esempio

Disegna un testo alto 30px su canvas utilizzando il font "Arial":

JavaScript:

Esempio

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Lezione di base(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
ctx.font="30px　Arial";
ctx.fillText("Hello　World",10,50);
}
</script>
</body>

</html>

Utilizza strokeText():

Esempio

Disegna un testo alto 30px su canvas utilizzando il font "Arial":

JavaScript:

Esempio

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Lezione di base(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
ctx.font="30px　Arial";
ctx.strokeText("Hello　World",10,50);
}
</script>
</body>

</html>

Canvas - 　Gradiente

Il gradiente può essere riempito in rettangoli, cerchi, linee, testi e altro, le diverse forme possono definire colori diversi.

Ci sono due modi diversi per impostare il gradiente di Canvas:

createLinearGradient(x,y,x1,y1) - Crea un gradiente lineare
createRadialGradient(x,y,r,x1,y1,r1) - Crea un gradiente radiale/circolare

Quando si utilizza un oggetto di gradiente, è necessario utilizzare due o più colori di arresto.

Il metodo addColorStop() specifica l'arresto del colore, i parametri utilizzano coordinate per descrivere, possono essere da 0 a 1.

Usa la gradazione, imposta il valore di fillStyle o strokeStyle di Usa la gradazione, poi disegna forme come rettangoli, testo o una linea.

Usa createLinearGradient():

Esempio

Crea una gradazione-lineare. Usa la gradazione per riempire un rettangolo:

JavaScript:

Esempio

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Lezione di base(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
// Creare gradiente
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Riempire con gradiente
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
}
</script>
</body>

</html>

Usa createRadialGradient():

Esempio

Crea una gradazione-radiale/circolare. Usa la gradazione per riempire un rettangolo:

JavaScript:

Esempio

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Lezione di base(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
// Creare gradiente
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Riempire con gradiente
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
}
</script>
</body>

</html>

Canvas - Immagine

Inserisci un'immagine nel canvas, utilizza il seguente metodo:

drawImage(image,x,y)

Usa l'immagine:

Esempio

Inserisci un'immagine nel canvas:

JavaScript:

Esempio

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Lezione di base(oldtoolbag.com)</title>　
</head>
<body>
<p>Immagine da utilizzare:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var　img=document.getElementById("scream");
　　　　img.onload　=　function()　{
ctx.drawImage(img,10,10);　
}
</script>
</body>

</html>

Prova a vedere ‹/›

Manuale di riferimento del canvas HTMLEcco come consultare le proprietà complete del tag

Manuale di riferimento del canvas.

Tag <canvas> HTML	Tag
Descrizione	<canvas>

SVG inline HTML5 Nuovi elementi HTML5

Tutorial di base HTML5

API HTML5

Media HTML5

Grafica HTML5

Canvas HTML5

Cos'è canvas?

Supporto del browser

Creare un riquadro di disegno (Canvas)

Disegnare immagini utilizzando JavaScript

Coordinate del canvas

Canvas - Percorso

Esempio

Esempio

Canvas - Testo

Esempio

Esempio

Canvas - Gradiente

Esempio

Esempio

Canvas - Immagine

Usa l'immagine:

Esempio

Prova a vedere ‹/›

Manuale di riferimento del canvas.

Canvas - 　Gradiente