Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
検索結果

    CanvasRenderingContext2D.moveTo()

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

    仕様

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

    ブラウザ互換性

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

    参考情報

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

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