Disegno di immagini Canvas HTML5

HTML5 Canvas utilizza drawImage() per disegnare immagini, prima di disegnare un'immagine sul canvas, è necessario creare un oggetto Image e caricare l'immagine nella memoria.

HTML5 Canvas ha opzioni per disegnare immagini. Puoi utilizzare le diverse funzioni del contesto 2D drawImage() per eseguire questa operazione. Ci sono tre diverse funzioni drawImage():

drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

Il primo parametro image è l'immagine da tracciare. In questo articolo si spiegherà come creare e caricare un'immagine.
I parametri dx e dy sono abbreviazioni di 'destinationX' e 'destinationY'. Questi parametri determinano la posizione dell'immagine sul canvas.
I parametri dw e dh sono abbreviazioni di 'destinationWidth' e 'destinationHeight'. Questi parametri determinano la dimensione dell'immagine quando viene tracciata.
In sx e sy sono abbreviazioni di 'sourceX' e 'sourceY'. Questi parametri determinano da quale posizione dell'immagine sorgente iniziare a copiare il rettangolo sull'immagine sul canvas.
In sw e sh sono abbreviazioni di 'sourceWidth' e 'sourceHeight'.

Creazione e caricamento dell'immagine

Prima di disegnare un'immagine sul canvas, è necessario creare un oggetto Image e caricare l'immagine nella memoria. Questo è il metodo fatto con JavaScript:

var image = new Image();
image.src = "https://it.oldtoolbag.com/en/run/html/canvas-shot.png";

È necessario che l'immagine sia completamente caricata prima di poterne disegnare una. Per determinare se l'immagine è completamente caricata, aggiungere un ascoltatore di eventi sull'immagine. Questo ascoltatore di eventi viene chiamato durante il caricamento dell'immagine. Ha questo aspetto:

image.addEventListener('load', drawImage1);

Il parametro drawImage1 è la funzione chiamata quando viene scatenato l'evento.
Questo è un esempio completo di codice che crea, carica e disegna un'immagine sul canvas:

window.onload = function() {
　　　　drawEx1();
}
var image1 = null;
function drawEx1() {
　　　　image1 = new Image();
　　　　image1.src =
　　　　　　　　"https://it.oldtoolbag.com/en/run/html/canvas-shot.png";
　　　　image1.addEventListener('load', drawImage1);
}
function drawImage1() {
　　　　var canvas = document.getElementById("ex1");
　　　　var context = canvas.getContext("2d");
　　　　context.drawImage(image1, 10, 10);
}

Questo è il risultato del codice sopra descritto quando si disegna sul canvas:

Canvas HTML5 non supportato

Ridimensionamento dell'immagine

Come descritto all'inizio di questo testo, è possibile ingrandire l'immagine durante la sua visualizzazione. Ecco un esempio di codice che disegna un'immagine e la ridimensiona a 200 pixel di larghezza e 100 pixel di altezza:

var width = 200;
var height = 100;
context.drawImage(image2, 10, 10, width, height);

Ecco l'aspetto dell'immagine quando viene disegnata sul canvas, con larghezza e altezza ridimensionate:

Canvas HTML5 non supportato

Disegnare una parte dell'immagine

È possibile disegnare solo una parte dell'immagine sul canvas. La parte disegnata è un rettangolo copiato dall'immagine. Ecco un esempio di codice:

var dx = 10;
var dy = 10;
var dw = 75;
var dh = 75;
var sx = 20;
var sy = 20;
var sw = 75;
var sh = 75;
context.drawImage(image3, sx, sy, sw, sh, dx, dy, dw, dh);

I parametri sono sx, sy, sw e sh (sx,sy dichiarano l'inizio del rettangolo) immagine, e la larghezza (sw) e l'altezza (sh) del rettangolo.

Ecco l'aspetto della rettangolo dell'immagine quando viene disegnato sul canvas:

Canvas HTML5 non supportato