252 of 264 menu

A lineWidth tulajdonság

A lineWidth tulajdonság a vonal vastagságát határozza meg a canvas-en való rajzoláskor.

Szintaxis

kontextus.lineWidth = egész szám;

Példa

Rajzoljunk egy vonalat és állítsuk be a vastagságát 5 pixelre:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas> let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.lineWidth = 5; // 5px vastagság ctx.moveTo(50, 50); ctx.lineTo(150, 50); ctx.stroke();

:

Példa

A vastagságot kontúrok esetén is meg lehet változtatni, például a rect segítségével rajzoltaknál:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas> let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.rect(50, 50, 100, 100); ctx.lineWidth = 5; ctx.stroke();

:

Lásd még

  • a lineCap tulajdonság,
    amely a vonal végeinek megjelenését határozza meg
  • a lineJoin tulajdonság,
    amely a vonal törésének stílusát határozza meg
daswhyhiby