242 of 264 menu

A lineTo metódus

A lineTo metódus vonalat húz pontok között. A vonal a rajzoló toll aktuális pozíciójától a megadott koordinátákig húzódik. A koordinátákat a metódus paraméterei adják meg.

Szintaxis

kontextus.lineTo(x, y);

Példa

Húzzunk egy vonalat:

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

:

Példa

Rajzoljunk egy négyzetet:

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

:

Lásd még

  • a moveTo metódus,
    amely a rajzoló tollat mozgatja
  • a closePath metódus,
    amely vonalakkal alakzatot zár
  • a lineWidth tulajdonság,
    amely a vonal vastagságát határozza meg
  • a lineJoin tulajdonság,
    amely a vonal törésének stílusát határozza meg
pluzhucsuzc