« Programmation objet et géométrie/La balise canvas » : différence entre les versions
Contenu supprimé Contenu ajouté
Aucun résumé des modifications |
|||
Ligne 187 :
==Coloriage==
===Aplat de couleur===
Une alternative à ''pinceau.stroke()'' est ''pinceau.fill()'' qui en plus, essaye de remplir le contour dessiné avec la couleur définie par ''fillStyle''. Ce qui revient à faire du coloriage. Par exemple, une [[w:lemniscate|lemniscate]] orange:
Ligne 217 ⟶ 219 :
[[Fichier:figurecanvas2.svg|center]]
===Dégradé de couleur===
L'usage de dégradés permet de faire des figures à l[[w:aérographe|aérographe]] donnant l'illusion du relief. Ci-dessous on va dessiner une boule de billard, mais d'abord son ombre. Dans les deux cas, on va créer un nouveau ''fillStyle'' pour l'objet ''pinceau''
====Ombre avec dégradé linéaire====
Le ''fillStyle'' sera linéaire, et contrôlé par deux points, l'un ayant la couleur de niveau 0, et l'autre la couleur de niveau 1. Les autres couleurs seront calculées par interpolation entre ces deux valeurs.
<source lang="javascript">
var ombre=pinceau.createLinearGradient(100,250,300,380);
</source>
Le point de coordonnées (100,250) (centre de l'ombre de la boule) sera noir, et le point de coordonnées (300,380) sera entièrement transparent (donc invisible) grâce à sa valeur ''a'' (le quatrième nombre) égal à 0 (sa valeur normale est 1):
<source lang="javascript">
ombre.addColorStop(0,"Black");
ombre.addColorStop(1,"rgba(0,0,0,0)");
</source>
Pour dessiner l'ombre, il suffit de tracer une ellipse (avec deux arcs de Bezier) et de la remplir avec ''fill'' mais après avoir choisi ''ombre'' comme ''fillStyle'':
<source lang="javascript">
pinceau.fillStyle=ombre;
pinceau.beginPath();
pinceau.moveTo(150,300);
pinceau.bezierCurveTo(150,250,350,250,350,300);
pinceau.bezierCurveTo(350,350,150,350,150,300);
pinceau.fill();
</source>
====Boule avec dégradé radial====
Pour définir un style de remplissage adapté à la boule, il faut en plus des coordonnées des deux points de départ et d'arrivée du dégradé (typiquement deux fois le même point pour une sphère), fournir deux rayons. Par exemple, si le premier centre est (180,150) (reflet brillant sur la boule) et le second (180,160) (centre de la partie sombre), la partie claire peut avoir pour rayon 10, et la partie wombre pour rayon 100:
<source lang="javascript">
var degrade=pinceau.createRadialGradient(180,150,10,180,160,100);
</source>
La boule aura l'air bleue si on prend du cyan (assez clair) comme couleur du reflet et du bleu comme couleur de la partie sombre:
<source lang="javascript">
degrade.addColorStop(0,"Cyan");
degrade.addColorStop(1,"Blue");
</source>
Pour dessiner la boule, on peut se contenter d'un arc de cercle de centre (200,200), de rayon 100, et dont les angles de départ et d'arrivée sont respectivement <math>0</math> (radians) et <math>2\pi</math> (la dernière valeur est un booléen sans importance pour un cercle complet), et de lui donner comme style de remplissage, le dégradé précédemment défini:
<source lang="javascript">
pinceau.fillStyle=degrade;
pinceau.beginPath();
pinceau.arc(200,200,100,0,Math.PI*2,true);
pinceau.fill();
</source>
Le script est un peu plus long que les précédents:
<source lang="html5">
<html>
<style type="text/css">
canvas { border: 4px solid brown; background: #FFFFFF }
</style>
<body>
<canvas id="cadre" width="400" height="400">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
var degrade=pinceau.createRadialGradient(180,150,10,180,160,100);
var ombre=pinceau.createLinearGradient(100,250,300,380);
degrade.addColorStop(0,"Cyan");
degrade.addColorStop(1,"Blue");
ombre.addColorStop(0,"Black");
ombre.addColorStop(1,"rgba(0,0,0,0)");
pinceau.fillStyle=ombre;
pinceau.beginPath();
pinceau.moveTo(150,300);
pinceau.bezierCurveTo(150,250,350,250,350,300);
pinceau.bezierCurveTo(350,350,150,350,150,300);
pinceau.fill();
pinceau.fillStyle=degrade;
pinceau.beginPath();
pinceau.arc(200,200,100,0,Math.PI*2,true);
pinceau.fill();
</script>
</canvas>
</body>
</html>
</source>
Mais l'effet obtenu est plutôt impressionnant:
[[Fichier:figurecanvas3.svg|center]]
| |||