HTML5 Contour et remplissage du canvas

Chaque fois que dans HTML5Lorsqu'on dessine des formes sur le canvas, il faut définir deux propriétés : Stroke (contour) et Fill (remplissage)

Propriétés de contour et de remplissage

Chaque fois que dans HTML5Lorsqu'on dessine des formes sur le canvas, il faut définir deux propriétés :

1. Dessin

2. Remplissage

Le Stroke (dessin) et le Fill (remplissage) déterminent la manière de dessiner les formes. Le Stroke est le contour de la forme. Le Fill est le contenu interne de la forme.

Exemple en ligne

Voici un exemple de rectangle dessiné avec un crayon bleu et rempli en vert (ce sont en réalité deux rectangles) :

Voici le code pour dessiner ces deux boîtes :

<canvas id="ex1" width="500" height="150" style="border:　1px solide #cccccc;">
　　　　HTML5　Canvas non pris en charge
</canvas>
<script>
//　1.Attendre que la page soit complètement chargée.
window.onload = function() {
　　　　drawExamples();
}
function drawExamples(){
　　　　//　2.Obtenir une référence à l'élément canvas.
　　　　var canvas = document.getElementById("ex1");
　　　//　3.Obtenir le canvas élément.2Contexte D.
　　　　var context = canvas.getContext("2d");
　　　　//　4.Dessiner des graphiques.
　　　　context.fillStyle　=　"#00"9900";
　　　　context.fillRect(10,10,　100,100);
　　　　context.strokeStyle　=　"#0000ff";
　　　　context.lineWidth　=　5;
　　　　context.strokeRect(10,10,　100,100);
}
</script>

Résultat de l'exemple ci-dessus:

Veuillez noter comment utiliser2Les propriétés strokeStyle et fillStyle du contexte D définissent respectivement le style de contour et le style de remplissage.

Il faut également noter comment utiliser la propriété lineWidth pour définir la largeur de contour (profil) du rectangle bleu. La valeur de lineWidth est définie sur5Ce qui signifie que la largeur de la ligne du rectangle décrit est5.

.2Enfin, veuillez noter comment spécifier