Canvasに点を描く
ページ上にJavaScriptを用いて点を描画します。
ここでも、やはり、Canvasを使用します。
（注）Canvasの詳しい説明は、記事「Canvasに長方形を描く」をご参照ください。
点の描画は、以下の手順となります。
- canvasを設定する
- canvas上に点を描画する
点
しかし、Canvasには「canvas上に点を描画する」関数はありません。
ここでは、「点」を「最小サイズの長方形」とみなして、点を描画します。
- 点を描画する関数はない。
- 「点」は、「最小サイズの長方形」とみなす。
（注）最小サイズ：横幅１pixel×高さ１pixel
「点」を「最小サイズの長方形」とみなすことで、簡単に「点」を描画し消去できます。
プログラム
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UYF-8" />
<title>Draw Point</title>
<script>
// グローバル変数
var x = 100; // 点の位置（x座標）
var y = 50; // 点の位置（y座標）
var w = 1; // 点の横幅
var h = 1; // 点の高さ
var context; // コンテキスト
// 点の描画準備
window.onload = function() {
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
}
// 点の描画
function drawRectangle() {
context.fillStyle = "orange";
context.fillRect(x, y, w, h);
}
// 点の消去
function clearRectangle() {
context.clearRect(x, y, w, h);
}
</script>
</head>
<body>
<canvas width="300" height="200" id="canvas" style="background-color:green;"></canvas>
<br>
<input type="button" value= "draw" onclick= "drawRectangle()">
<input type="button" value="clear" onclick="clearRectangle()">
</body>
</html>
機能
- [draw]ボタンをクリックすると、Canvasの座標（100, 50）にオレンジ色の点を描画
- [clear]ボタンをクリックすると、Canvasの座標（100, 50）のオレンジ色の点を消去
上記プログラムは、記事「Canvasに長方形を描く２」のプログラム３とほぼ同じです。
プログラムの詳しい説明は、記事「Canvasに長方形を描く２」をご覧ください。
プログラムの修正点は以下の通りです。
- 5行目、title要素を、Draw Rectangleから、Draw Pointに修正
- コメント欄、「長方形」を「点」に修正
- 10行目、点の横幅wを、1に設定
- 11行目、点の高さhを、1に設定
