Il logo del sito

Appunti su JavaScript

Gestione delle aree di disegno - 1

HTML5 ha introdotto i canvas, aree della pagina video in cui si può disegnare e scrivere tramite JavaScript.

Creazione delle aree di disegno

Sulla pagina si può creare un'area di disegno mediante l'elemento html canvas. Successivamente si può interagire con esso tramite JavaScript

Nel codice html ho inserito un elemento canvas <id="mioCanvas" width="300" height="300"> impostando gli attributi width e height con lo stesso valore 100. Il posizionamento sulla pagina, il colore dello sfondo e la dimensione attuale del canvas sono state specificate in un foglio di stile

L'ho fatto con un foglio di stile, canvas.css

Ora, tramite JavaScript si può disegnare sul canvas. Ma prima si deve accedere alla proprietà context dell'oggetto:

var mioCanvas=document.getElementById("mioCanvas");
var context=mioCanvas.getContext("2d");
Disegnamo alcune forme:
Codice js:js_05.js