HTML5 Canvas
<canvas> Grafica tag personalizzati, ad esempio grafici e altre immagini, è necessario utilizzare uno script per disegnare elementi grafici.
Nella tela (Canvas) disegnare un rettangolo rosso, rettangolo pendenza, rettangoli colorati, e un po 'di testo colorato.
Qual è la tela di canapa?
HTML5 elemento <canvas> è usato per disegnare elementi grafici utilizzando lo scripting (di solito JavaScript) per completare.
<Canvas> tag è un contenitore grafica, è necessario utilizzare uno script per disegnare elementi grafici.
È possibile utilizzare Tela disegnare tracciati, scatole, cerchi, personaggi e immagini aggiungendo attraverso una varietà di metodi.
Supporto per il browser
Internet Explorer 9+, Firefox, Opera, Chrome, Safari e il supporto elemento <canvas>.
Nota: Internet Explorer 8 e le versioni precedenti del browser IE non supporta elemento <canvas>.
Creare una tela (Canvas)
Una pagina di tela è un rettangolo viene disegnato attraverso l'elemento <canvas>.
Nota: per impostazione predefinita, l'elemento <canvas> non ha confini e contenuti.
<Canvas> Semplici esempi sono i seguenti:
Nota: L'etichetta di solito necessario specificare un attributo id (lo script spesso citato), dimensioni, larghezza e altezza attributi definiscono la tela.
Suggerimento: è possibile utilizzare più elemento <canvas> in una pagina HTML.
Utilizzando l'attributo di stile per aggiungere un bordo:
Esempi
style="border:1px solid #000000;">
</canvas>
Prova »
Utilizzare JavaScript per disegnare elementi grafici
elemento canvas per sé non è il disegno di potere. Tutti i lavori devono essere redatti in JavaScript fatto internamente:
Esempi
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Prova »
Esempi di analisi:
In primo luogo, trovare l'elemento <canvas>:
Quindi, creare l'oggetto contesto:
getContext ( "2D") oggetto è un oggetto incorporato HTML5 ha diversi metodi per percorsi di disegno, scatole, cerchi, personaggi e immagini aggiungendo.
Le seguenti due righe di codice per disegnare un rettangolo rosso:
ctx.fillRect(0,0,150,75);
Impostazione proprietà FillStyle può essere un colore CSS, sfumatura o un pattern. impostazione di default è fillStyle # 000000 (nero).
fillRect (x, y, larghezza,altezza) definisce un rettangolo riempito con il metodo attuale.
coordinate tela
tela è una griglia bidimensionale.
tomaia in tela coordinate angolo di sinistra (0,0)
Il metodo di cui sopra ha parametri fillRect (0,0,150,75).
Ciò significa: Disegna un rettangolo 150x75 sulla tela da un angolo in alto a sinistra (0,0).
Esempi di coordinate
Come mostrato di seguito, coordinate X e Y della tela sulla tela per il posizionamento della pittura. Il movimento del rettangolo mouse, posizione di visualizzazione coordinate.
Canvas - Path
Sulla linea di verniciatura della tela di canapa, useremo i seguenti due metodi:
- moveTo(x, y) le coordinate definire una linea che inizia
- lineTo(x, y) coordinate per definire la fine della riga
Tracciare una linea dobbiamo usare i metodi di "inchiostro", come ictus ().
Esempi
Definire iniziare coordinate (0,0), e le coordinate finali (200, 100) e quindi utilizzare il metodo di corsa () per disegnare la linea:
JavaScript:
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Prova »
Disegnare un cerchio nella tela, useremo il metodo seguente:
- arco (x, y, r, start, stop)
Infatti, abbiamo utilizzato l'approccio "inchiostro" quando si disegna un cerchio, come l'ictus () o il riempimento ().
Esempi
Utilizzare arco () per disegnare un cerchio:
JavaScript:
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Prova »
Canvas - Testo
Utilizzare tela per disegnare testo, le proprietà ei metodi importanti come segue:
- font - definire il carattere
- fillText (testo, x, y)- Disegna un testo solido su tela
- strokeText (testo, x, y)- disegno su tela di testo vuoto
Utilizzare fillText ():
Esempi
Utilizzare font "Arial" rendere un testo di alta 30px (solido) sulla tela:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Prova »
Utilizzare strokeText ():
Esempi
Utilizzare font "Arial" rendere un testo di alta 30px (vuoto) su tela:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Prova »
Canvas - Gradiente
Gradiente può essere riempito in rettangoli, cerchi, linee, testo, ecc, varie forme possono definire diversi colori.
Qui ci sono due modi diversi per impostare Canvas Gradiente:
- createLinearGradient (x, y, x1,y1) - Creazione di un gradiente di linea
- createRadialGradient (x, y, r,x1, y1, r1) - Creazione di un radiale / round-classificato
Quando usiamo un oggetto pendenza, è necessario utilizzare due o più colori di arresto.
addColorStop () per specificare interruzioni di colore, utilizzare le coordinate per descrivere i parametri che possono essere 0-1.
Utilizzando l'impostazione fillStyle o strokeStyle valore del gradiente di pendenza, e quindi disegnare forme, come rettangoli, testo o una riga.
Utilizzare createLinearGradient ():
Esempi
Creare una sfumatura lineare. Utilizzare pendenza rettangolo di riempimento:
JavaScript:
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Prova »
Utilizzare createRadialGradient ():
Esempi
Creare un gradiente radiale / circolare. Utilizzare pendenza rettangolo di riempimento:
JavaScript:
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Prova »
Tela - Immagini
L'unica immagine sulla tela, con le seguenti modalità:
- drawImage(immagine, x, y)
Utilizzare un'immagine:
Esempi
L'immagine viene posizionata su una tela:
JavaScript:
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
Prova »
Manuale HTML Canvas di riferimento
di proprietà completa della etichetta può riferirsi manuale di riferimento della tela di canapa.
L'HTML <canvas> tag
| Tag | 描述 |
|---|---|
| <canvas> | HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 |