More than 3 years have passed since last update.

【入門者向け】Canvas入門講座#17 マウスクリックで四角形を作成してみよう【JavaScript】

Posted at 2020-12-02

#問題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();
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up