242 of 264 menu

lineToメソッド

メソッド lineTo は、点から点へ線を引きます。 線は、描画ペンの現在位置から、メソッドのパラメータで指定された座標まで描画されます。

構文

コンテキスト.lineTo(x, y);

線を描いてみましょう:

<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();

:

四角形を描いてみましょう:

<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();

:

関連項目

  • 描画ペンを移動させるメソッド moveTo,
  • 線を形状として閉じるメソッド closePath,
  • 線の太さを設定するプロパティ lineWidth,
  • 線の接合部分のスタイルを設定するプロパティ lineJoin,
日本語
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItalianoქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
当サイトでは、サイトの動作、分析、パーソナライゼーションのためにクッキーを使用しています。 データ処理はプライバシーポリシーに従って行われます。
すべて受け入れる 設定 拒否