HTML and CSS Reference
In-Depth Information
A ogni frame, oltre a disegnare l'immagine, disegneremo anche la palla, grazie all'uso del
path specificato.
usare per il riempimento e il contorno del rettangolo. In realtà, sono le uniche due funzioni
di disegno, perché, per le altre figure primitive, l'unico strumento che possiamo usare è il
path. La logica è simile a quanto già visto con SVG:
iniziamo il disegno di una forma con la funzione
beginPath
;
spostiamo il cursore o dichiariamo gli elementi con le funzioni
moveTo
,
lineTo
,
quadraticCurveTo
,
bezierCurveTo
,
arcTo
e
arc
;
chiudiamo facoltativamente il disegno della forma con
closePath
;
riempiamo o contorniamo la forma disegnata con
fill
o
stroke
.
Per il disegno della palla, il nostro obiettivo è riempire e contornare un cerchio:
Esempio 10.24
function drawBall() {
context.save();
// Traccio la palla
context.beginPath();
context.arc(ballx, bally, ballSize * 2, 0, Math.PI * 2,
true);
// Creo il gradiente della palla
var radial = context.createRadialGradient(
ballx, bally, 2, ballx, bally,
10);
radial.addColorStop(0, "#F06707");
radial.addColorStop(1, "#E34F12");
// Coloro la palla