Canvas

演習5-1

キャンバスに矩形を表示するスクリプトを作成せよ

解答例

別ウィンドウで表示

ソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>簡単なCanvas</title>
<script type="text/javascript">
"use strict";
window.addEventListener("load", function () {
var context;
// コンテキストを取得
context = document.getElementById("canvas0").getContext("2d");
// 描画その１
context.beginPath();
context.strokeStyle = "#FF0000"; // 塗りつぶす色（赤）を指定
context.strokeRect(30, 30, 100, 100); // 矩形を描画
// 描画その２
context.beginPath();
context.fillStyle = "rgba(0, 0, 255, 0.3)";// 塗りつぶす色（青）を指定，透過（0.3）
context.fillRect(70, 70, 200, 100); // 矩形を描画
});
</script>
<style>
canvas {
border : 1px solid #0000FF;
}
</style>
</head>
<body>
<canvas id="canvas0" width="300" height="200"></canvas>
</body>
</html>

解説

Canvasはブラウザ上に図を描くために策定された仕様で，これを利用するとFlashやJavaのようなプラグインを使わずにJavaScriptベースで図を描くことができる．
HTMLドキュメントに，Canvas要素をおき（29行目），その要素をgetElementByIdなどのメソッドで取り出して（11行目），操作する（10行目から19行目）．
11行目
- Canvasに図を描くには，getContextメソッドでコンテキストオブジェクトを取り出し，そのオブジェクトの描画メソッドを実行することによって描画する．
13行目から15行目
- 矩形を描画するには，線を描くと宣言し（beginPath），線のスタイルを指定し（strokeStyle），描画する（strokeRect）．
17行目から19行目
- 矩形を塗りつぶすには，線を描くと宣言し（beginPath），塗りつぶしのスタイルを指定し（fillStyle），描画する（fillRect）．

演習5-2

キャンバスをクリックしたら矩形を表示するスクリプトを作成せよ．

解答例

別ウィンドウで表示

マウスアップで，その位置に正方形を表示する．

ソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas マウスアップで正方形を表示</title>
<script type="text/javascript">
"use strict";
window.addEventListener("load", function () {
var canvas, context;
// Canvasを取得
canvas = document.getElementById("canvas1");
// コンテキストを取得
context = canvas.getContext("2d");
// cavasにイベントを設定
canvas.addEventListener("mouseup", function (e) {
var rect, x, y, l;
// イベントのターゲット（キャンバス）の座標を取得
rect = e.target.getBoundingClientRect();
// マウスダウンの座標を取得
x = e.clientX - rect.left;
y = e.clientY - rect.top;
l = Math.random() * 20 + 20;
// 矩形の描画
context.beginPath();
context.fillStyle = "rgba(0,255,0,0.2)";
context.fillRect(x, y, l, l);
});
});
</script>
<style>
canvas {
border : 1px solid #0000FF;
}
</style>
</head>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
</body>
</html>

解説

13行目から26行目
- キャンバス要素を取得し，そのキャンバス要素に「マウスアップで正方形を描画する」イベントリスナーを追加する．
18行目から20行目
- マウスアップの座標はmouseupイベントから得られる．イベントをeとすると，ウィンドウ上のマウスの座標は(e.clientX, e.clientY)，マウスがのっている要素はe.getBoundingClientRect()である．この要素をrectとすると（18行目），マウスがのっている要素（この場合がキャンバス）内での座標は（e.clientX - rect.left, e.clientY - rect.top）となる．
21行目
- 正方形の1辺の長さを20pxから40pxの間のランダムな値とする．
22行目から25行目
- 矩形の描画は演習5-1と同様．

演習5-3

マウスで大きさを指定して矩形を描画するスクリプトを作成せよ．
- マウスダウンで矩形の左上を指定し，マウスアップで矩形の右下を指定

解答例

別ウィンドウで表示

マウスで大きさを指定してCanvasに矩形を描画する．

ソース

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: solid 1px #000066;
}
</style>
<meta charset="utf-8" />
<title>Canvas マウスで矩形を描画</title>
<script type="text/javascript">
"use strict";
window.addEventListener("load", function () {
var
canvas, context, // カンバスとコンテクスト
x1, y1, // 描画領域中のマウスの位置（mousedown）
x2, y2, // 描画領域中のマウスの位置（mousemove, mouseup)
draw_flag; // 描画中か否か（ドラッグ中か否か）
canvas = document.getElementById("canvas1");
context = canvas.getContext("2d");
draw_flag = false;
// マウスダウンの処理
canvas.addEventListener("mousedown", function (e) {
var rect;
// ドラッグ中
draw_flag = true;
// イベントのターゲット（キャンバス）の座標を取得
rect = e.target.getBoundingClientRect();
// マウスダウンの座標を記憶
x1 = x2 = e.clientX - rect.left;
y1 = y2 = e.clientY - rect.top;
}, false);
// マウスアップの処理
canvas.addEventListener("mouseup", function (e) {
var bcr;
// ドラッグ中でなければ何もしない．
if (draw_flag === false) {
return;
}
// イベントのターゲット（キャンバス）の座標を取得
bcr = e.target.getBoundingClientRect();
// canvasをクリア
context.clearRect(0, 0, bcr.right, bcr.bottom);
// マウスアップの座標
x2 = e.clientX - bcr.left;
y2 = e.clientY - bcr.top;
// 矩形を描画
context.strokeStyle = "#000000";
context.beginPath();
context.strokeRect(x1, y1, x2 - x1, y2 - y1);
// ドラッグ中ではない
draw_flag = false;
}, false);
});
</script>
</head>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
</body>
</html>

解説

マウスダウンで矩形の左上の座標を取得・記憶し，マウスアップで矩形の右下の座標を取得して描画すればよい．
ドラッグ中のみマウスアップのイベントの処理を行うようにするために，draw_flagを導入する．
- マウスダウンでドラッグ開始（draw_flagをtrueに）：27行目
- マウスアップでドラッグ終了（draw_flagをfalseに）：54行目
- マウスアップのとき，draw_flagがfalseなら何もしない：38行目から41行目

演習5-4

マウスで大きさを指定して矩形を描画するスクリプトを作成せよ．
ただし，ドラッグ中にその時点の大きさの矩形を赤で表示し，マウスアップしたときの最終的な矩形を黒で表示することとする．

解答例

別ウィンドウで表示

マウスで大きさを指定してCanvasに矩形を描画する．

ソース

// マウスムーブの処理
canvas.addEventListener("mousemove", function (e) {
var bcr;
// ドラッグ中でなければ何もしない．
if (draw_flag === false) {
return;
}
// イベントのターゲット（キャンバス）の座標を取得
bcr = e.target.getBoundingClientRect();
// canvasをクリア
context.clearRect(0, 0, bcr.right, bcr.bottom);
// マウスアップの座標
x2 = e.clientX - bcr.left;
y2 = e.clientY - bcr.top;
// 矩形を描画
context.strokeStyle = "#FF0000";
context.beginPath();
context.strokeRect(x1, y1, x2 - x1, y2 - y1);
}, false);

解説

マウスムーブの処理を追加すればよい．
マウスムーブの処理はマウスアップの処理と同様に，イベントから矩形の右下の座標を取得し，その座標とマウスダウンの処理で記憶した左上の座標を使って矩形を描画する．
- その際，1回前のマウスムーブで書いた矩形を消去するために，clearRect（11行目）を使ってキャンバスをクリアする．
- そうしないと，ドラッグで矩形内が塗りつぶされてしまう．

演習5-5

マウスで大きさを指定して矩形を描画するスクリプトを作成せよ．このとき，一度描画した矩形を，表示したままにせよ．

解答例

別ウィンドウで表示

マウスで大きさを指定してCanvasに矩形を描画する．ただし，一度描画した矩形を消さない．

ソース

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: solid 1px #000066;
}
</style>
<meta charset="utf-8" />
<title>Canvas マウスで矩形を描画</title>
<script type="text/javascript">
"use strict";
window.addEventListener("load", function () {
var
canvas, context, // カンバスとコンテクスト
x1, y1, // 描画領域中のマウスの位置（mousedown）
x2, y2, // 描画領域中のマウスの位置（mousemove, mouseup)
draw_flag, // 描画中か否か（ドラッグ中か否か）
rects; // 描画済みの矩形群
canvas = document.getElementById("canvas1");
context = canvas.getContext("2d");
draw_flag = false;
rects = [];
// マウスダウンの処理
canvas.addEventListener("mousedown", function (e) {
var rect;
// ドラッグ中
draw_flag = true;
// イベントのターゲット（キャンバス）の座標を取得
rect = e.target.getBoundingClientRect();
// マウスダウンの座標を記憶
x1 = x2 = e.clientX - rect.left;
y1 = y2 = e.clientY - rect.top;
}, false);
// マウスムーブの処理
canvas.addEventListener("mousemove", function (e) {
var bcr, i;
// ドラッグ中でなければ何もしない．
if (draw_flag === false) {
return;
}
// イベントのターゲット（キャンバス）の座標を取得
bcr = e.target.getBoundingClientRect();
// canvasをクリア
context.clearRect(0, 0, bcr.right, bcr.bottom);
// 描画済みの矩形群を再描画
context.strokeStyle = "#000000";
for (i = 0; i < rects.length; i += 1) {
context.strokeRect(rects[i].x, rects[i].y, rects[i].w, rects[i].h);
}
// マウスアップの座標
x2 = e.clientX - bcr.left;
y2 = e.clientY - bcr.top;
// 矩形を描画
context.strokeStyle = "#FF0000";
context.beginPath();
context.strokeRect(x1, y1, x2 - x1, y2 - y1);
}, false);
// マウスアップの処理
canvas.addEventListener("mouseup", function (e) {
var bcr, i;
// ドラッグ中でなければ何もしない．
if (draw_flag === false) {
return;
}
// イベントのターゲット（キャンバス）の座標を取得
bcr = e.target.getBoundingClientRect();
// canvasをクリア
context.clearRect(0, 0, bcr.right, bcr.bottom);
// マウスアップの座標
x2 = e.clientX - bcr.left;
y2 = e.clientY - bcr.top;
// 新たに描画された矩形を矩形群rectsに追加
rects.push({x: x1, y: y1, w: x2 - x1, h: y2 - y1});
// 矩形群を描画
context.strokeStyle = "#000000";
context.beginPath();
for (i = 0; i < rects.length; i += 1) {
context.strokeRect(rects[i].x, rects[i].y, rects[i].w, rects[i].h);
}
// ドラッグ中ではない
draw_flag = false;
}, false);
});
</script>
</head>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
</body>
</html>

解説

マウスムーブの処理とマウスアップの処理で，キャンバスをクリアする代わりに，それまでに描画された全ての矩形を再描画するようにすればよい．
再描画するには，描画された全ての矩形群の位置と大きさを保持する必要があるので，そのための変数rects（配列）を導入し（20行目），マウスアップの度に新たな矩形（の位置と大きさ）をrectsに追加する．
マウスムーブの処理
- 矩形群の再描画は黒で（51行目から55行目）．
- 新たな矩形の描画は赤で（60行目から602行目）．
マウスアップの処理
- 新たな矩形を矩形群rectsに追加（79行目から80行目）．配列への追加メソッドはpush．
- 矩形群の描画は黒で（81行目から86行目）．