We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CanvasRenderingContext2D.moveTo()

ここへジャンプ:
  1. 構文
  2. 例
  3. 仕様
  4. ブラウザ互換性
  5. 参考情報

Canvas 2D API の CanvasRenderingContext2D.moveTo() メソッドは、新しいサブパスの始点を (x, y) 座標に移動します。

構文

void ctx.moveTo(x, y);

引数

x
点の x 座標。
y
点の y 座標。

例

moveTo メソッドを使う

これは moveTo メソッドを使って線を描画するためにペンを始点へ動かす、実にシンプルなコード断片です。

HTML

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

JavaScript

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

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

仕様

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

ブラウザ互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

参考情報

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

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