Mr. Webmaster Blog Menu
  • Home
  • Cerca
  • Argomenti del Blog
    • A
    • Apple
    • B
    • Browser
    • C
    • CMS
    • D
    • Database
    • E
    • Eventi & WorkShop
    • F
    • Freelance
    • G
    • Grafica
    • H
    • Hosting
    • I
    • IoT
    • L
    • Linux
    • M
    • Makers
    • Mobile
    • Mr. Webmaster
    • O
    • Online Apps
    • Open Source
    • P
    • Programmazione
    • R
    • Reti
    • S
    • Scripting
    • Senza Rete
    • Sicurezza
    • Social Network
    • Software e App
    • W
    • Web Design
    • Web e Diritto
    • Web e Lavoro
    • Web Marketing
    • Web Server
    • Web Writing
    • Windows
  • Network
  • Corsi on-line
Mr.Webmaster Blog→Grafica→Sovrapposizione di poligoni con HTML5
  • 18
    GIU
    2015

Sovrapposizione di poligoni con HTML5

Scritto da Claudio Garau | Grafica

L’elemento canvas di HTML5 è stato concepito per mettere a disposizione degli sviluppatori uno strumento con il quale generare delle componenti grafiche al volo; sostanzialmente si tratta di un container per gli output, che potranno essere realizzati attraverso JavaScript, le componenti grafiche saranno invece prodotte tramite dei metodi appositamente dedicati.

canvas

Per ottenere un effetto basato sulla sovrapposizione dei poligoni (nel caso specifico, dei rettangoli) come quello riprodotto nell’immagine proposta in precedenza, è possibile fare ricorso ad un codice sorgente sul modello di quello proposto di seguito:

<!DOCTYPE html>
<html>
<body>
<canvas id="polCanvas" width="500" height="200" style="border:2px dashed green;">
Il browser non supporta l'elemento canvas.</canvas>
<script>
var x = document.getElementById("polCanvas");
var y = x.getContext("2d");

y.beginPath();
y.lineWidth = "2";
y.strokeStyle = "yellow";
y.rect(15, 15, 310, 160);
y.stroke();

y.beginPath();
y.lineWidth = "3";
y.strokeStyle = "orange";
y.rect(45, 45, 180, 70);
y.stroke();

y.beginPath();
y.lineWidth = "4";
y.strokeStyle = "violet";
y.rect(55, 55, 180, 80);
y.stroke();

y.beginPath();
y.lineWidth = "5";
y.strokeStyle = "red";
y.rect(65, 65, 180, 90);
y.stroke();
</script>

</body>
</html>

Nel listato proposto il container associato all’elemento canvas prende il nome di polCanvas ed è a sua volta un rettangolo caratterizzato da un bordo verde tratteggiato; passando ai rettangoli contenuti da canvas, questi vengono prodotti tutti nello stesso modo, a partire dal metodo getContext().

Quest’ultimo restituisce in istanza un oggetto a sua volta in grado di mettere a disposizione dei metodi e delle proprietà per disegnare all’interno del container, il parametro “2d” permetterà di creare in esso linee, testi e altri contenuti bidimensionali. beginPath() è invece un metodo che inizializza le creazione dell’elemento grafico, in caso di inizializzazione precedente opera un reset che permetterà di realizzare un ulteriore elemento.

Il parametro numerico passato a lineWidth() determina lo spessore del bordo mentre strokeStyle() consentirà di definirne la colorazione. rect() è in questo caso il metodo più importante, infatti è grazie a quest’ultimo che si potrà stabilire la posizione del rettangolo all’interno del container (i primi due parametri corrispondono a delle coordinate cartesiane) e le sue dimensioni (gli ultimi due argomenti).

L’ultimo metodo sottoposto a chiamata sarà stroke(), ad esso spetterà il compito di disegnare il poligono all’interno del percorso inizializzato con beginPath().

  • canvas
  • HML5

Naviga tra i post del Blog

← Un case ufficiale per Raspberry Pi 2
→ 4, un linguaggio di programmazione basato sugli emoji

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • Feed RSS
Post correlati
  • Effetto di transizione con canvas e HTML5 27/11/2015
  • Semplice logo in SVG 26/11/2015
  • Esempi di HTML5 11/04/2010
  • Canvas: immagini ad alta risoluzione sui dispositivi mobili 03/12/2014
I post più letti del mese
  • Immagini riflesse con CSSImmagini riflesse con CSS08/06/2010
  • Photo Pea, editare file di Photoshop online07/04/2017
  • 48 splendide animazioni basate su HTML548 splendide animazioni basate su HTML516/06/2010
  • GraphicsJS: grafica con JavaScriptGraphicsJS: grafica con JavaScript22/09/2016
  • Creare facilmente icone per iOS con App Icon TemplateCreare facilmente icone per iOS con App Icon Template30/01/2012
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2019 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: condizioni d'uso / privacy / cookie