Ricerca…
Come aggiungere l'elemento Html5 Canvas a una pagina Web
Html5-Canvas ...
- È un elemento Html5.
- È supportato nella maggior parte dei browser moderni (Internet Explorer 9+).
- È un elemento visibile che è trasparente per impostazione predefinita
- Ha una larghezza predefinita di 300 px e un'altezza predefinita di 150 px.
- Richiede JavaScript perché tutto il contenuto deve essere aggiunto a livello di codice alla tela.
Esempio: crea un elemento Html5-Canvas usando sia markup Html5 che JavaScript:
<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvasHtml5{border:1px solid red; }
#canvasJavascript{border:1px solid blue; }
</style>
<script>
window.onload=(function(){
// add a canvas element using javascript
var canvas=document.createElement('canvas');
canvas.id='canvasJavascript'
document.body.appendChild(canvas);
}); // end $(function(){});
</script>
</head>
<body>
<!-- add a canvas element using html -->
<canvas id='canvasHtml5'></canvas>
</body>
</html>
Dimensioni e risoluzione della tela
La dimensione di una tela è l'area che occupa nella pagina ed è definita dalle proprietà di larghezza e altezza CSS.
canvas {
width : 1000px;
height : 1000px;
}
La risoluzione canvas definisce il numero di pixel che contiene. La risoluzione viene impostata impostando le proprietà di larghezza e altezza dell'elemento canvas. Se non specificato, il canvas ha un valore predefinito di 300 per 150 pixel.
La seguente tela utilizzerà la precedente dimensione CSS ma, poiché la width e l' height non sono specificate, la risoluzione sarà 300 per 150.
<canvas id="my-canvas"></canvas>
Ciò comporterà che ogni pixel viene allungato in modo non uniforme. L'aspetto dei pixel è 1: 2. Quando la tela viene tesa, il browser utilizzerà il filtro bilineare. Questo ha un effetto di sfocatura dei pixel che vengono allungati.
Per ottenere i migliori risultati quando si utilizza il canvas, assicurarsi che la risoluzione del canvas corrisponda alle dimensioni dello schermo.
Seguendo lo stile CSS sopra per abbinare le dimensioni dello schermo aggiungi la tela con la width e l' height impostate sullo stesso numero di pixel definito dallo stile.
<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>
Off screen canvas
Molte volte quando si lavora con la tela è necessario disporre di una tela per contenere alcuni dati intrum pixel. È facile creare una tela fuori schermo, ottenere un contesto 2D. Una tela fuori schermo utilizzerà anche l'hardware grafico disponibile per il rendering.
Il seguente codice crea semplicemente una tela e la riempie di pixel blu.
function createCanvas(width, height){
var canvas = document.createElement("canvas"); // create a canvas element
canvas.width = width;
canvas.height = height;
return canvas;
}
var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);
Molte volte la tela fuori schermo verrà utilizzata per molte attività e potresti avere molte tele. Per semplificare l'uso della tela è possibile allegare il contesto della tela alla tela.
function createCanvasCTX(width, height){
var canvas = document.createElement("canvas"); // create a canvas element
canvas.width = width;
canvas.height = height;
canvas.ctx = canvas.getContext("2d");
return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);
Rilevamento della posizione del mouse sulla tela
Questo esempio mostrerà come ottenere la posizione del mouse rispetto alla tela, tale che (0,0) sarà l'angolo in alto a sinistra della tela HTML5. e.clientX ed e.clientY otterranno le posizioni del mouse rispetto alla parte superiore del documento, per cambiarlo basandosi sulla parte superiore della tela sottraiamo le posizioni left e right della tela dal client X e Y.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";
canvas.addEventListener("mousemove", function(e) {
var cRect = canvas.getBoundingClientRect(); // Gets CSS pos, and width/height
var canvasX = Math.round(e.clientX - cRect.left); // Subtract the 'left' of the canvas
var canvasY = Math.round(e.clientY - cRect.top); // from the X/Y positions to make
ctx.clearRect(0, 0, canvas.width, canvas.height); // (0,0) the top left of the canvas
ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});
L'uso di Math.round è dovuto per garantire che le posizioni x,y siano numeri interi, poiché il rettangolo di delimitazione della tela potrebbe non avere posizioni di numeri interi.
Ciao mondo
HTML
<canvas id="canvas" width=300 height=100 style="background-color:#808080;">
</canvas>
Javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "34px serif";
ctx.textAlign = "center";
ctx.textBaseline="middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World",150,50);
Risultato
Un indice delle capacità e degli usi della tela Html5
Funzionalità della tela
Canvas ti consente di disegnare in modo programmatico sulla tua pagina web:
- Immagini ,
- Testi ,
- Linee e curve .
I disegni su tela possono essere disegnati estensivamente:
- larghezza della corsa ,
- colore del tratto ,
- forma colore di riempimento ,
- opacità ,
- ombreggiato ,
- gradienti lineari e gradienti radiali ,
- carattere ,
- dimensione del carattere ,
- allineamento del testo ,
- il testo può essere accarezzato, riempito o sia accarezzato e riempito ,
- ridimensionamento delle immagini ,
- ritaglio di immagini ,
- compositing
Usi della tela
I disegni possono essere combinati e posizionati ovunque sulla tela in modo che possa essere utilizzato per creare:
- Applicazioni Paint / Sketch,
- Giochi interattivi veloci,
- I dati analizzano come grafici, grafici,
- Imaging simile a Photoshop,
- Pubblicità in stile Flash e contenuto Web appariscente.
Canvas ti consente di manipolare i colori dei componenti Rosso, Verde, Blu e Alfa delle immagini. Ciò consente al canvas di manipolare le immagini con risultati simili a Photoshop.
- Ricolora qualsiasi parte di un'immagine a livello di pixel (se usi HSL puoi anche ricolorare un'immagine conservando l'illuminazione e la saturazione importanti in modo che il risultato non assomigli a qualcuno che schiaffeggia l'immagine),
- "Elimina" lo sfondo attorno a una persona / elemento in un'immagine,
- Rileva e Floodfill parte di un'immagine (ad esempio, cambia il colore di un petalo selezionato dall'utente da verde a giallo - solo quel petalo cliccato!),
- Do Warping Perspective (ad es. Avvolgere un'immagine attorno alla curva di una tazza),
- Esaminare un'immagine per il contenuto (ad esempio riconoscimento facciale),
- Rispondere a domande su un'immagine: Esiste una macchina parcheggiata in questa immagine del mio parcheggio ?,
- Applicare filtri di immagine standard (scala di grigi, seppia, ecc.)
- Applica qualsiasi filtro di immagine esotico che puoi immaginare (Sobel Edge Detection),
- Combina immagini. Se la cara nonna Sue non riuscisse a raggiungere il ricongiungimento familiare, basta "fotografarla" nell'immagine della riunione. Non mi piace Cugino Phil - solo "photoshop fuori,
- Riproduci un video / Prendi una cornice da un video,
- Esportare il contenuto del canvas come .jpg | .png image (puoi anche ritagliare o annotare l'immagine e esportare il risultato come una nuova immagine),
Informazioni sullo spostamento e la modifica di disegni su tela (ad esempio per creare un gioco d'azione):
- Dopo che qualcosa è stato disegnato sulla tela, il disegno esistente non può essere spostato o modificato. Questo malinteso comune che i disegni su tela sono mobili vale la pena chiarire: i disegni su tela esistenti non possono essere modificati o spostati!
- La tela si disegna molto, molto velocemente. La tela può disegnare centinaia di immagini, testi, linee e curve in una frazione di secondo. Usa la GPU quando è disponibile per velocizzare il disegno.
- La tela crea l'illusione del movimento disegnando velocemente e ripetutamente qualcosa e quindi ridisegnandolo in una nuova posizione. Come la televisione, questo costante ridisegno dà allo sguardo l'illusione del movimento.
Ruotare
Il metodo rotate(r) del contesto 2D ruota la tela della quantità specificata r di radianti attorno all'origine.
HTML
<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<button type="button" onclick="rotate_ctx();">Rotate context</button>
Javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World", ox, oy);
rotate_ctx = function() {
// translate so that the origin is now (ox, oy) the center of the canvas
ctx.translate(ox, oy);
// convert degrees to radians with radians = (Math.PI/180)*degrees.
ctx.rotate((Math.PI / 180) * 15);
ctx.fillText("Hello World", 0, 0);
// translate back
ctx.translate(-ox, -oy);
};
Salva la tela nel file immagine
È possibile salvare una tela su un file immagine utilizzando il metodo canvas.toDataURL() , che restituisce l' URI di dati per i dati dell'immagine della tela.
Il metodo può prendere due parametri opzionali canvas.toDataURL(type, encoderOptions) : type è il formato dell'immagine (se omesso il valore predefinito è image/png ); encoderOptions è un numero compreso tra 0 e 1 che indica la qualità dell'immagine (il valore predefinito è 0.92).
Qui disegniamo una tela e colleghiamo l'URI dei dati della tela al link "Download to myImage.jpg".
HTML
<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>
Javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);
download_img = function(el) {
// get image URI from canvas object
var imageURI = canvas.toDataURL("image/jpg");
el.href = imageURI;
};
Demo dal vivo su JSfiddle.