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→Effetto di transizione con canvas e HTML5
  • 27
    NOV
    2015

Effetto di transizione con canvas e HTML5

Scritto da Claudio Garau | Grafica, Scripting

canvas è un elemento di HTML5 che consente di realizzare dinamicamente componenti grafiche all’interno di pagine Internet e Web applications utilizzando un linguaggio come JavaScript; sostanzialmente canvas non integra funzionalità specifiche per il disegno, per disporre di tali features sarà invece necessario ricorrere ad uno script.

CatturaIn questo post verrà proposto un esempio basato sull’utilizzo del metodo transform() che nel caso specifico metterà a disposizione una matrice per la trasformazione di un quadrilatero; a livello pratico verrà disegnato un primo rettangolo, verrà aggiunta una matrice, ridisegnato il rettangolo, aggiunta un’ulteriore matrice e ridisegnato il rettangolo per l’ultima volta.

canvas verrà richiamato una sola volta, all’inizio del codice per la creazione di un rettangolo che conterrà tutti quelli sottoposti a trasformazione:

<canvas id="iRect" width="400" height="350" style="border:2px dashed #ccc;"></canvas>

Fatto questo si potranno definire due variabili, la prima associata al selettore del rettangolo precedentemente definito, la seconda deputata a definire il contesto nel quale verranno disegnati i rettangoli successiva che, nello specifico, sarà bidimensionale:

var drw = document.getElementById("iRect");
var res = drw.getContext("2d");

Non rimarrà quindi che la fase relativa alla generazione dei tre triangoli che saranno il prodotto della trasformazione operata tramite la chiamata a transform():

res.fillStyle = "#33CC33";
res.fillRect(0, 0, 280, 120)
res.transform(1, 0.5, -0.5, 1, 40, 10);
res.fillStyle = "#00CC66";
res.fillRect(0, 0, 280, 120);
res.transform(1, 0.5, -0.5, 1, 40, 10);
res.fillStyle = "#339933";
res.fillRect(0, 0, 280, 120);

Per comodità del lettore verrà proposto di seguito l’intero codice della pagina Web destinata alla visualizzazione dell’output:

<!DOCTYPE html>
<html>
<head>
<title>Trasformazione con HTML5 e canvas</title>
</head>
<body>
<canvas id="iRect" width="400" height="350" style="border:2px dashed #ccc;"></canvas>
<script>
var drw = document.getElementById("iRect");
var res = drw.getContext("2d");
res.fillStyle = "#33CC33";
res.fillRect(0, 0, 280, 120)
res.transform(1, 0.5, -0.5, 1, 40, 10);
res.fillStyle = "#00CC66";
res.fillRect(0, 0, 280, 120);
res.transform(1, 0.5, -0.5, 1, 40, 10);
res.fillStyle = "#339933";
res.fillRect(0, 0, 280, 120);
</script>
</body>
</html>

E’ da sottolineare che l’utilizzo di transform() influisce unicamente sugli elementi grafici generati dopo la sua chiamata, per cui non determinerà alcuna modifica a carico di quelli restanti,

  • canvas
  • html5
  • Javascript

Naviga tra i post del Blog

← Semplice logo in SVG
→ DELETE cumulativi su più tabelle in MySQL

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
  • Canvas: immagini ad alta risoluzione sui dispositivi mobili 03/12/2014
  • Sovrapposizione di poligoni con HTML5 18/06/2015
  • Manipolare l’elemento Canvas con Fabric.js 30/10/2012
  • Testare il supporto di HTML5 nei browser con Modernizr 04/04/2011
  • Galleria d’immagini con effetto Flip 11/06/2010
I post più letti del mese
  • Loading in attesa del caricamento della paginaLoading in attesa del caricamento della pagina22/03/2010
  • Scusi, mi sa dire il timestamp?Scusi, mi sa dire il timestamp?01/04/2010
  • Esecuzione di codice PHP da JavaScriptEsecuzione di codice PHP da JavaScript06/10/2015
  • Temporizzare il redirect con PHPTemporizzare il redirect con PHP15/06/2010
  • Redirect con jQueryRedirect con jQuery09/07/2010
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