English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Dans HTML5L'une des formes les plus faciles à dessiner sur un élément de toile est le rectangle. Vous pouvez utiliser2Les fonctions du contexte D fillRect() et strokeRect().
Dans HTML5L'une des formes les plus faciles à dessiner sur un élément de toile est le rectangle. Vous pouvez utiliser2Les fonctions du contexte D fillRect() et strokeRect(). Voici un exemple simple :
<canvas id="ex1" largeur="500" hauteur="150" style="border: 1px solide #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>Voyons voir ‹/›Vous pouvez utiliser lineWidth2Définir les propriétés du contexte D pour la largeur de ligne du contour du rectangle. Voici la méthode :
<canvas id="ex4" largeur="500" hauteur="150" style="border: 1px solide #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var largeur = 100;
var hauteur = 100;
context.lineWidth = 4;
context.strokeRect(x, y, largeur, hauteur);
</script>Voyons voir ‹/›C'est la largeur de ligne4Pour l'apparence du rectangle :
Vous pouvez utiliser 2Définir la couleur de dessin du rectangle en utilisant les propriétés fillStyle ou strokeStyle du contexte D. Voici un exemple, ces réglages sont affichés en gras:
<canvas id="ex5" largeur="500" hauteur="150" style="border: 1px solide #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>Voyons voir ‹/›Ceci est un rectangle dessiné à nouveau sur le canevas: