クリックイベント
クリック
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ファイルを読み込みます。
スタイルシートのファイル
<link rel="stylesheet" href="main.css">
JavaScriptファイルを読み込みます
<script src="main.js"></script>
canvas を用意する。
<canvas id="mainCanvas"></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;
マウスダウンイベントの設定