コイケアキヨシ blog: HTML5のCanvasを使ってみた

■HTML5のCanvasとは
JavaScriptを使って、図形を書くことができるものです！
線、四角形、円などいろいろな図形をかけます。

■試しに使ってみた
・作る図形

・ソース

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(120, 100);
context.lineTo(50, 50);
context.lineTo(50, 150);
context.closePath();
context.stroke();
</script>
</body>
</html>


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(120, 100);
context.lineTo(50, 50);
context.lineTo(50, 150);
context.closePath();
context.stroke();
</script>
</body>
</html>

・ブラウザが対応していれば、下記リンクから見れます
サンプル

・解説
-beginPath()
サブパスのリストを空にして、コンテキストのサブパスが 0 個となるようにします。
今回でいうと、関係ないですが一応書いておいきます！

・moveTo(x,y)
指定された地点で新規のサブパスを生成します。
要するに、初期値店を指定することと同意です。

-lineTo(x,y)
コンテキストにサブパスがなければ、(x, y) に対するサブパスを定義します。コンテキストにサブパスがあれば、サブパスの終点から座標 (x, y) に向けて直線を引きます。そして、サブパスに、座標 (x, y) を追加します。
最初にmoveToにてサブパスが生成されていない場合は、線が引かれることはなく、サブパスの定義で終わります。

-closePath()
現在のサブパスを閉じていると記録し、その閉じたサブパスの開始と終了と同じ地点で、新たなサブパスを開始します。

-stroke()
現在のストローク・スタイルを使って、サブパスに線を引きます。

コイケアキヨシ blog

2010年5月9日日曜日

HTML5のCanvasを使ってみた

0 件のコメント:

コメントを投稿