« Programmation objet et géométrie/La balise canvas » : différence entre les versions

Contenu supprimé Contenu ajouté
Aucun résumé des modifications
Ligne 188 :
==Coloriage==
 
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:
 
 
<source lang="html5">
<html>
<style type="text/css">
canvas { border: 4px solid brown; background: #FFFFFF }
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.fillStyle='Orange';
pinceau.beginPath();
pinceau.moveTo(50,100);
pinceau.bezierCurveTo(50,0,350,200,350,100);
pinceau.bezierCurveTo(350,0,50,200,50,100);
pinceau.fill();
</script>
</canvas>
<br/>
</body>
</html>
</source>