クリックイベント

クリック

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;
マウスダウンイベントの設定