« Programmation objet et géométrie/La balise canvas » : différence entre les versions
Contenu supprimé Contenu ajouté
Aucun résumé des modifications |
|||
Ligne 153 :
</source>
===Exemple===
Une alternative est ''pinceau.fill()'' qui en plus, essaye de remplir le contour dessiné avec la couleur définie par ''fillStyle''.▼
Avec trois courbes de Bezier, on peut faire une signature d'aspect très manuel:
<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.strokeStyle='Blue';
pinceau.lineWidth='8';
pinceau.lineCap='round';
pinceau.beginPath();
pinceau.moveTo(50,100);
pinceau.bezierCurveTo(120,20,160,200,150,100);
pinceau.bezierCurveTo(120,20,100,100,150,100);
pinceau.bezierCurveTo(200,120,180,100,350,100);
pinceau.stroke();
</script>
</canvas>
</body>
</html>
</source>
L'effet obtenu est le suivant:
[[Fichier:figurecanvas1.svg|center]]
==Coloriage==
▲Une alternative à ''pinceau.stroke()'' est ''pinceau.fill()'' qui en plus, essaye de remplir le contour dessiné avec la couleur définie par ''fillStyle''.
| |||