1. Introduction
  2. Dessiner la balle
  3. Ajouter de la couleur
  4. Faire bouger la balle
  5. Éclaircir le code grâce aux fonctions
  6. Faire rebondir la balle
  7. Ajouter une raquette
  8. Contrôle par le clavier
  9. Ajouter les briques
  10. Touche finale
  11. Remerciements

Ajouter de la couleur

Nous pouvons ajuster différents paramètres tels que la couleur de la balle. Le format de la valeur de ctx.fillStyle peut être un code couleur hexadécimal de la forme "#rrggbb" ou bien "rgba(r, g, b, alpha)" où r, g, b désignent respectivement les niveaux de rouge, vert, bleu et alpha désigne une valeur de transparence comprise entre 0 et 1. 
var ctx = $('#canvas')[0].getContext("2d");
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var ctx = $('#canvas')[0].getContext("2d");
 
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(220, 220, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
 
ctx.fillStyle = "#FF1C0A";
ctx.beginPath();
ctx.arc(100, 100, 100, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
 
// Ce rectangle est à moitié transparent
ctx.fillStyle = "rgba(255, 255, 0, .5)"
ctx.beginPath();
ctx.rect(15, 150, 120, 120);
ctx.closePath();
ctx.fill();

Je vous invite à modifier les couleurs ainsi que le paramètre alpha et à cliquer sur Exécuter pour observer comment se comportent les éléments.

suiv. préc.

blog comments powered by Disqus