<canvas>: l'elemento Graphics Canvas

Utilizzare l' elemento HTML <canvas> con l' API di scripting canvas o l' API WebGL per disegnare grafica e animazioni.

Attributi

height

L'altezza dello spazio delle coordinate in pixel CSS. Il valore predefinito è 150.

moz-opaque

Consente alla tela di sapere se la traslucenza sarà o meno un fattore. Se la tela sa che non c'è traslucenza, le prestazioni di pittura possono essere ottimizzate. Questo è supportato solo dai browser basati su Mozilla; usa invece lo standard canvas.getContext('2d', { alpha: false }).

width

La larghezza dello spazio delle coordinate in pixel CSS. Il valore predefinito è 300.

Note d'uso

Contenuto alternativo

Dovresti fornire contenuto alternativo all'interno del blocco <canvas>. Tale contenuto verrà visualizzato sia su browser meno recenti che non supportano canvas sia su browser con JavaScript disabilitato.

Tag </canvas> richiesto

A differenza dell'elemento <img>, l'elemento <canvas> richiede il tag di chiusura (</canvas>).

Ridimensionamento della tela utilizzando CSS al posto di HTML

La dimensione visualizzata della tela può essere modificata utilizzando CSS, ma se lo fai l'immagine viene ridimensionata durante il rendering per adattarsi alla dimensione dello stile, il che può far sì che il rendering grafico finale venga distorto.

È meglio specificare le dimensioni della tela impostando gli attributi width e height direttamente sugli elementi <canvas>, direttamente nell'HTML o utilizzando JavaScript.

Dimensione massima della tela

La dimensione massima di un elemento <canvas> è molto grande, ma la dimensione esatta dipende dal browser. Di seguito sono riportati alcuni dati che abbiamo raccolto da vari test e altre fonti (ad es. Stack Overflow ):

Nota: il superamento delle dimensioni o dell'area massime rende la tela inutilizzabile: i comandi di disegno non funzioneranno,

Esempi

HTML

Questo frammento di codice aggiunge un elemento canvas al documento HTML. Viene fornito un testo di riserva se un browser non è in grado di eseguire il rendering della tela o se non è in grado di leggere una tela.

<canvas width="300" height="300">
  Testo alternativo che descrive cosa mostra questo elemento canvas.
</canvas>

Javascript

Quindi nel codice JavaScript, chiama HTMLCanvasElement.getContext() per ottenere un contesto di disegno e inizia a disegnare sull'area di disegno:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 109);

Problemi di accessibilità

Contenuto alternativo

L'elemento <canvas> di per sé è solo una bitmap e non fornisce informazioni su alcun oggetto disegnato. Il contenuto della tela non è esposto agli strumenti di accessibilità come lo è l'HTML semantico. In generale, dovresti evitare di utilizzare la tela in un sito Web o in un'app accessibile.