MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CanvasRenderingContext2D.lineTo()

Canvas 2D API の CanvasRenderingContext2D.lineTo() メソッドは、直線でサブパスの終点を x と y の座標へ接続します（この線は実際には描画されません）。

構文

void ctx.lineTo(x, y);

引数

x
線の終点の x 座標。
y
線の終点の y 座標。

例

lineTo メソッドを使う

これは lineTo メソッドを使った実にシンプルなコード断片です。beginPath() を使って直線を描くパスを開始し 、ペンを moveTo() で動かし、そして stroke() メソッドを使って実際に線を描画します。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100, 100);
ctx.stroke();

下のコードを編集して、変更が canvas に直に反映されることを確認してください。

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100, 100);
ctx.stroke();</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

仕様

仕様 状態 コメント
WHATWG HTML Living Standard
CanvasRenderingContext2D.lineTo の定義		 現行の標準  

ブラウザ互換性

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) (有) (有) (有) (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) (有) (有) (有) (有)

参考情報

ドキュメントのタグと貢献者

 このページの貢献者: sii
 最終更新者: sii,