MENU

JavaScriptDOMCanvas

【JavaScript】 Canvas上でクリックした座標を取得する

更新日:2020/07/09

 

Canvasは、表示されているサイズと描画をおこなうエリアのサイズがことなります。

 

そのため、ブラウザ上でクリックされた座標を求めるには一工夫必要です。

 

キャンバス上でのクリック座標を求めるサンプルコード

 

 

html

 


<div id="did">
    <canvas id="can" width="500" height="600"></canvas>
</div>
<div id="output"></div>

 

css

 


        #did{
            width: 300px;
            height: 300px;
            margin: auto;
        }
        #canvas{
            width: 100%;
            height: 100%;
            margin: auto;
            border: 1px solid black;
        }
        #output{
            height: 100px;
            overflow: auto;
            background: black;
            color: white;
            padding: 10px;
        }

 

css

 


        window.addEventListener( "DOMContentLoaded" , ()=> {

            const cvs = document.getElementById("canvas");
            cvs.addEventListener("click",e=>{
                const rect = e.target.getBoundingClientRect();

                    // ブラウザ上での座標を求める
                const   viewX = e.clientX - rect.left,
                        viewY = e.clientY - rect.top;

                    // 表示サイズとキャンバスの実サイズの比率を求める
                const   scaleWidth =  cvs.clientWidth / cvs.width,
                        scaleHeight =  cvs.clientHeight / cvs.height;

                    // ブラウザ上でのクリック座標をキャンバス上に変換
                const   canvasX = Math.floor( viewX / scaleWidth ),
                        canvasY = Math.floor( viewY / scaleHeight );

                console.log( canvasX,canvasY );
            });
        });

 

テスト

 

枠内をクリックしてください

ブラウザ上での座標→キャンバス上で座標で表示されます

解説

 

要素をクリックしたときに引数で渡されるオブジェクトから、ブラウザでのクリック座標を取得できます。

 

e.clientX : x座標
e.clientY : y座標

 

e.target.getBoundingClientRect()メソッドは、クリックされた要素の位置や大きさの情報をオブジェクトで取得できます。

 

このオブジェクトのtopとleftプロパティは、ターゲットとなる要素のブラウザ上での左上座標です。

 

よって、e.clientXからleftプロパティの値を差し引くと要素上のx座標に、e.clientYからtopプロパティの値を差し引くと要素上のy座標に変換できます。

 

次に、キャンバスの実サイズと表示されているサイズが異なるため、この点も考慮する必要があります。

 

キャンバスの実サイズは、キャンバス要素のwidthプロパティとheightプロパティで取得できます。
キャンバスの表示サイズ、clientWidthとclientHeightで取得できます。

 

この情報から比率を求めて、キャンバス上の座標に変換します。

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://affi-sapo-sv.com/info.php