HTML リファレンスマニュアル

HTML タグ一覧

HTMLキャンバス lineTo() メソッド

Canvas 2D API は子パスの終端を x、y 座標に直線で結ぶ方法を使用します（実際には描画しません）。

オンライン例

新しいパスを開始し、位置 0,0 に移動します。位置に到達するまで 300,150 に一条の線：

例

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas lineTo()メソッドの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
あなたのブラウザは HTML5　canvas タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>
</body>
</html>

テストして見て‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari は lineTo() をサポートしていますメソッド。

注意：Internet Explorer 8 及びその以前のバージョンでは <canvas> 要素をサポートしていません。

定義と使用方法

lineTo() メソッドは新しいポイントを追加し、最後に指定されたポイントからキャンバスに向かって線を描画します（このメソッドは実際には線を描画しません）。

ヒント：使用してください： stroke() キャンバス上に特定のパスを描画するメソッド。

JavaScript 言語：	context.lineTo(x,y);

パラメータの値

パラメータ	説明
x	線の目標位置の x 座標。
y	線の目標位置の y 座標。

オンライン例

文字 L が形になる線を描画します：

例

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas lineTo()メソッドの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
あなたのブラウザは HTML5　canvas タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();
</script>
</body>
</html>

テストして見て‹/›

HTML canvas 参考書

HTML: <template> タグ