Метод lineTo

Метод lineTo чизикни нуқтадан нуқтага ўтказади. Чизик расм чизиш қаламининг жорий жойлашувидан бошланиб, кўрсатилган координаталаргача ўтказилади. Координаталар методнинг параметрлари билан кўрсатилади.

Синтаксис

javascriptконтекст.lineTo(x, y);

Мисол

Келинг, битта чизик чизайлик:

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.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

Мисол

Келинг, битта квадрат чизайлик:

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.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.lineTo(50, 50);
ctx.stroke();

Результат:

Шунингдек қаранг

  • метод moveTo,
    расм чизиш қаламини жойлаштиради
  • метод closePath,
    чизикларни шаклга якавлайди
  • хусусият lineWidth,
    чизикнинг қалинлигини белгилайди
  • хусусият lineJoin,
    чизикнинг сингиш услубини белгилайди