読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

Canvasを使ってみる。

<スポンサーリンク>

Canvasとは

Canvasとは、Webページにビットマップイメージ描画するための技術。
この技術を使えば、プラグイン無しにJavaScriptだけでブラウザに図を書くことができる。

Internet ExplorerでCanvasを使いたい場合は「ExplorerCanvas」をダウンロードする。

<head>
	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>

Canvasで円を描いてみる

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Canvas Sample</title>
<script>
onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('sample');
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.arc(150, 65, 60, 0, Math.PI*2, false);
	ctx.stroke();
}
</script>
</head>
<body>
<h1>Canvasのサンプル</h1>
<canvas id="sample" width="300" height="150"></canvas>
</body>
</html>

Canvasで円弧を描く

上のdraw()メソッドを以下のように変更すればいい

function draw() {
	var canvas = document.getElementById('sample');
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.arc(70, 70, 60, 10 * Math.PI / 270, 80 * Math.PI / 90 , false);
	ctx.stroke();
}