クリックイベント

クリック

canvas の上ゅクリックした位置に四角形を表示します。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
</head>
<body>
    <h1>canvas クリックイベント</h1>
    <canvas id="mainCanvas" width="480px" height="480"></canvas>
</body>
</html>

スタイルシートのファイルとJavaScriptファイルを読み込みます。

スタイルシートのファイル

JavaScriptファイルを読み込みます

canvas を用意する。

style.css

body {
margin: 0px;
background-color: lightgray;
}

#mainCanvas {
border: solid 1px black;
}

canvas の境界線を表示

main.js

window.onload = function() {
let maincanvas = document.getElementById("mainCanvas");
maincanvas.onmousedown = mymousedown;
}

// 四角形を描く
function rect (cv, x, y, w, h, colo) {
cv.fillStyle= colo; // 塗りつぶしの色指定
cv.fillRect(x, y, w, h); // x, y, 幅, 高さ
}

// マウスダウン
function mymousedown(e) {
    let cv = document.getElementById("mainCanvas").getContext("2d"); //描画コンテキスト取得
    let mouseX = e.clientX;
    let mouseY = e.clientY;
    rect (cv, mouseX - 50/2, mouseY -100, 50, 50, "red");
}

let maincanvas = document.getElementById("mainCanvas");

キャンバスを取得

maincanvas.onmousedown = mymousedown;
マウスダウンイベントの設定