Propriété miterLimit

La propriété miterLimit régule l'acuité de la jonction entre deux lignes dans le cas où la propriété lineJoin est définie sur la valeur miter. Comment elle régule : si la longueur de l'angle est plus grande que le nombre défini dans miterLimit, alors la jonction des lignes se comporte comme si lineJoin était définie sur la valeur bevel.

Par défaut, miterLimit a la valeur 10. Il n'est pas possible de définir sa valeur à moins de 1.

Syntaxe

javascriptcontexte.lineJoin = 'miter' ou 'round' ou 'bevel';

Exemple

Actuellement, la propriété lineJoin est définie sur la valeur miter, mais tant qu'aucune limite n'est fixée, l'angle est aigu :

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

Результат:

Exemple

Et maintenant, définissons une limite à l'aide de miterLimit :

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.miterLimit = 1;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

Результат:

Voir aussi