« Programmation objet et géométrie/Les lignes droites de canvas » : différence entre les versions
Contenu supprimé Contenu ajouté
Aucun résumé des modifications |
|||
Ligne 38 :
===Segment en pointillés===
====Avec une boucle====
On peut faire un segment en pointillés avec une boucle, en alternant les traits tracés (avec ''lineTo()'') et les traits non tracés (avec ''moveTo()''):
Ligne 64 ⟶ 66 :
</html>
</source>
Une variante permet d'ajouter des graduations (en faisant des pointillés perpendiculaires au segment).
====Avec un dégradé====
<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');
var pointille=pinceau.createLinearGradient(50,100,350,100);
for(n=0;n<=15;n++){
pointille.addColorStop(n/16,"Black");
pointille.addColorStop((n+0.499)/16,"Black");
pointille.addColorStop((n+0.501)/16,"White");
pointille.addColorStop((n+0.999)/16,"White");
}
pinceau.strokeStyle=pointille;
pinceau.beginPath();
pinceau.moveTo(50,100);
pinceau.lineTo(350,100);
pinceau.stroke();
</script>
</canvas>
<br/>
</body>
</html>
</source>
Cette variante, qui nécessite aussi une boucle (pour fabriquer le dégradé), présente l'avantage de s'appliquer aussi à des courbes.
==Triangle==
| |||