Propriété lineWidth du Canvas
Exemple
Dessinez une ligne avec une largeur de ligne de 10 pixels :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 10;
// Commencer un nouveau chemin
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(200, 100);
// Dessiner le chemin
ctx.stroke(); Plus d'exemples ci-dessous.
Description
La propriété lineWidth définit ou renvoie la largeur de ligne actuelle, en pixels.
La valeur par défaut est de 1 pixel.
Voir aussi :
La propriété strokeStyle (Définir la couleur/style de trait)
La méthode beginPath() (Commencer un nouveau chemin)
La méthode moveTo() (Déplacer le chemin vers un point)
La méthode lineTo() (Ajouter une ligne au chemin)
La méthode stroke() (Dessiner le chemin actuel)
La méthode strokeRect() (Dessiner un rectangle)
Syntaxe
| context .lineWidth = number |
Valeurs de propriété
| Valeur | Description | Jouez-le |
|---|---|---|
| number | La largeur de ligne actuelle, en pixels |
Exemple
Dessinez un rectangle avec une largeur de ligne de 10 pixels :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 10;
ctx.strokeRect(20, 20, 80, 100); Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
lineWidth est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |