Mr. Webmaster Menu
  • Home
  • Cerca
  • Didattica
    • A
    • Android
    • Apache
    • Apple
    • ASP
    • ASP.Net
    • C
    • Cloud
    • CMS
    • CSS
    • D
    • Database
    • E
    • Editor
    • G
    • Grafica
    • H
    • Hosting
    • HTML
    • J
    • Java
    • Javascript
    • jQuery
    • L
    • Leggi e Fisco
    • Linux
    • M
    • Mobile
    • MySQL
    • N
    • NET Framework
    • P
    • Photoshop
    • PHP
    • Primi Passi
    • Programmazione
    • R
    • Reti
    • Ruby
    • S
    • Sicurezza
    • Social Media
    • SQL
    • W
    • Web Design
    • Web Marketing
    • Web Server
    • Windows
    • WordPress
    • X
    • XML
    • Di tendenza
    • Android Studio
    • Bootstrap
    • Cookie Law
    • Hosting Wordpress
    • Node.js
    • Registrazione Domini
  • Download
    • Software
    • Script
    • Plugin CMS
    • Flash Movies
    • Sound Loops
    • Templates
    • Web Grafica
    • Font Gratis
  • Risorse
    • SEO Tools
    • WebApps
  • News
  • Blog
  • Forum
  • Network
    • Toolset.it
    • SiteMarket.it
    • Codalo.it
  • Corsi on-line
Mr. Webmaster → HTML → Guide → Guida HTML5 → L'elemento canvas e le canvas API (parte 3) - Gradienti, ombreggiature, trasformazioni

L'elemento canvas e le canvas API (parte 3) - Gradienti, ombreggiature, trasformazioni

  • CommentaScrivi un commento
  • ForumDiscuti sul forum
  • PrecedenteL'elemento canvas e le canvas API (parte 2) - Creazione di testi
  • SuccessivoL'elemento canvas e le canvas API (parte 4) - Tipi di linee e manipolazione per pixel
  • Pubblicato il
  • 22/02/2012
  • Autore
  • Riccardo Brambilla

Gradienti

Per colorare il piano cartesiano della lezione precedente ho utilizzato un gradiente lineare, vediamo nel dettaglio tutte le possibilità che vengono offerte per definire gradienti:

gradient = context.createLinearGradient(x0, y0, x1, y1)

Restituisce un oggetto CanvasGradient che rappresenta un gradiente lineare che colora la linea definita dalle coordinate passate come parametri.

gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1)

Restituisce un oggetto CanvasGradient che rappresenta un gradiente radiale che colora il cono rappresentato dal cerchio definito dai parametri in input.

gradient.addColorStop(offset, color)

Aggiunge un colore al gradiente (color, esadecimale/stringa/rgb) all'offset indicato (da 0.0 inizio gradiente sino a 1.0 fine gradiente).

Continua dopo la pubblicità...

Definito un gradiente è sufficiente assegnarlo al fillStyle del contesto e chiamare la funzione fill() per applicarlo.

Altra area di applicazione delle canvas APIs sono le immagini. Possiamo caricare immagini preesistenti e modificarle. Le APIs offrono alcune interessanti funzionalità, applichiamone qualcuna in un esempio:

<!doctype html>
<html>
<head>
<title>Immagini e canvas</title>
<script src="jquery.js"></script>
<script>

// # Al DOM Ready
$(function() {

  // # Ottengo l'oggetto relativo al canvas
  var canvasObj = document.getElementById("c_area");
  context = canvasObj.getContext("2d"); // recupero il contesto

  // # Istanzio l'oggetto immagine
  var immagine = new Image();
  
  // # l'immagine è sul filesystem
  immagine.src = "canvasimage.png";
  
  // # al caricamento disegno l'immagine alle coordinate indicate, con dimensioni 182x173
  immagine.onload = function() {
    context.drawImage(immagine, 50, 40, 182, 173);
  }

  // # Applico una ombreggiatura
  context.shadowOffsetX = 6;
  context.shadowOffsetY = 6;
  context.shadowBlur = 5;
  context.shadowColor = "#333";

  // # ridimensiono l'immagine al 60% delle dimensioni originali
  context.scale(0.6, 0.6);
  
});
</script>
</head>
<body>
<article>
<canvas id="c_area" height="300px">Impossibile mostrare il canvas</canvas>
</article>
</body>
</html>

Ecco l'immagine originale:

canvasimage orig

ed il risultato delle elaborazioni:

canvasimage

Ombreggiature

Nell'esempio abbiamo applicato una ombreggiatura, per definirla abbiamo a disposizione quattro proprietà :

  • context.shadowColor [ = valore]: getter/[setter] per definire il colore dell'ombra.
  • context.shadowOffsetX [ = valore]: getter/[setter] per definire l'offset sul piano delle ascisse (orizzontale) dell'ombra.
  • context.shadowOffsetY [ = valore]: getter/[setter] per definire l'offset sul piano delle ordinate (verticale) dell'ombra.
  • context.shadowBlur [ = valore]: getter/[setter] per definire il grado di sfocamento dell'ombra.

Trasformazioni

Ho introdotto nell'esempio anche una semplice trasformazione, ottenuta attraverso il metodo scale (ridimensiona), nel draft vengono descritti e resi disponibili nelle APIs i seguenti metodi:

  • context.scale(x, y): ridimensiona l'immagine secondo i parametri forniti; x è il ratio orizzontale, y quello verticale.
  • context.rotate(angle): applica una rotazione (l' angolo è in radianti).
  • context.translate(x, y): trasla l'immagine in accordo con i parametri forniti; x è lo spostamento orizzontale, y quello verticale.
  • context.trasform(a, b, c, d, e, f) (notazione alternativa dei parametri: m11, m12, m21, m22, dx, and dy): modifica la matrice di trasformazione esistente moltiplicandola per la matrice formata dai parametri spediti in input.
    La matrice è una 3x3 così composta
    a c e
    b d f
    0 0 1.
  • context.setTransform(a, b, c, d, e, f): resetta la matrice alla matrice di identità, poi effettua una chiamata al metodo transform con i parametri passati in input.

Sfoglia le lezioni della guida

←L'elemento canvas e le canvas API (parte 2) - Creazione di testi
→L'elemento canvas e le canvas API (parte 4) - Tipi di linee e manipolazione per pixel

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
  • App Android
  • App iOS
  • Feed RSS
Frequenta i nostri corsi
  • Corso HTMLCorso HTML
    Il linguaggio di markup delle pagine web. A partire da 29 €
  • Corso HTML5Corso HTML5
    Creare pagine web di ultima generazione sfruttando la potenza di HTML5. A partire da 49 €
  • Corso Web DesignCorso Web Design
    Webdesign e Responsive Design dei siti Web. A partire da 49 €
Vedi anche...
  • Immagine di sfondo ad un sito web con HTML
  • Impostare un colore di sfondo in HTML
  • Il tag <body> di HTML
  • HTML: gestire spazi bianchi e tabulazioni
  • Le Web Audio API di HTML5
Altre Guide
  • Guida HTML
  • Guida XHTML
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2018 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: info legali / privacy / cookie
Altro: extra / sondaggi / sitemap