問題17
クリックした座標を中心に四角形を描画しなさい。
四角形は赤色(#ff0000)で塗りつぶすこと。
四角形は1辺の長さが30の正方形とする。
以下のHTMLを使用すること。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>問題17</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(() => {
$('#my-canvas').click(e => {
});
});
</script>
</head>
<body>
<canvas id="my-canvas" width="500" height="300"></canvas>
</body>
</html>
解答
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>問題17</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(() => {
$('#my-canvas').click(e => {
const cursorX = e.offsetX,
cursorY = e.offsetY;
drawRect(cursorX, cursorY);
});
function drawRect(x, y) {
// コンテキストを取得
const ctx = $('#my-canvas')[0].getContext('2d');
// 現在の描画状態を保存する
ctx.save();
// 塗りつぶしの色を赤(#ff0000)にする
ctx.fillStyle = '#ff0000';
// (x, y) を中心に1辺が30の正方形を塗りつぶす
ctx.fillRect(x - 15, y - 15, 30, 30);
// 描画状態を保存した時点のものに戻す
ctx.restore();
}
});
</script>
</head>
<body>
<canvas id="my-canvas" width="500" height="300"></canvas>
</body>
</html>
クリック座標に四角形が描画できました
解説
問題16と同じで描画時にcanvasをクリアしていません。
四角形の塗りつぶしはbeginPathを呼ばずにfillRectだけで描画可能です。
これも知っておくとよいでしょう。
$('#my-canvas').click(e => {
const cursorX = e.offsetX,
cursorY = e.offsetY;
drawRect(cursorX, cursorY);
});
function drawRect(x, y) {
// コンテキストを取得
const ctx = $('#my-canvas')[0].getContext('2d');
// 現在の描画状態を保存する
ctx.save();
// 塗りつぶしの色を赤(#ff0000)にする
ctx.fillStyle = '#ff0000';
// (x, y) を中心に1辺が30の正方形を塗りつぶす
ctx.fillRect(x - 15, y - 15, 30, 30);
// 描画状態を保存した時点のものに戻す
ctx.restore();
}