2023.01.10画面を格子状に区切ってクリックした位置のマス目番号を取得したいときがあります。キャンバス上でクリックしたマウス座標からマス目番号を取得するサンプルを紹介します。目次サンプルをみる考え方サンプルのソースコードサンプルをみるクリックしたセル番号とマウス座標は、コンソールに表示されます。F12キーでConsole表示させてから確認してください。例として、キャンバスに描画した画像を3×3のマス目に区切って内部的に0~8まで9つの番号がついている場合を考えます。イメージ画像は480×480ピクセルの正方形画像を使っています。3×3の格子状に区切ると1セルが160×160ピクセルとなります。1セルのピクセルサイズ160と1辺のセル数3、そしてクリックしたマウス座標(x、y)を使えば、0から8までのマス目番号は以下の式で取得できます。160);実際のJavaScriptプログラムでは割り算の結果を小数点以下切り捨ての整数として次のようなコードで実現しています。CELL_SIZE)を変更すれば、ブロックサイズや1辺のセル数が変わっても対応できると思います。参考キャンバス上のマウス座標取得については以下で解説しています。JavaScript:キャンバスでマウスクリックした座標を得るキャンバス(canvas)上でマウスクリックしたXY座標を得るサンプルです。dianxnao.com2023.02.07サンプルのソースコードサンプルの画像はスタジオジブリ提供の画像を加工して利用させていただいています。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト上に表示された文字を入力してください。認証期間が終了しました。ページを再読み込みしてください。ΔホームJavaScriptこの記事を書いている人dennou好きな食べ物はトマトです。学生時代は授業中よく寝ていました。このサイトがお役に立てばうれしいです。views2020.08.31最近読んで面白かった本どうやらオレたち、いずれ死ぬっつーじゃないですかみうらじゅんとリリー・フランキーの共著。二人とも意外と的を得たことを言っており面白い。みうらじゅんとリリー・フランキーの世界観が好きな人はきっと楽しめるはず。アーカイブdennou2024.09.11お役に立てずすいませんYouTube動画にアーティストの曲をBGM挿入するとどうなるのか?匿名2024.09.11すみません、以前のコメントはdミュージックの件ですね。......分かりました。返信ありがとう御座いますYouTube動画にアーティストの曲をBGM挿入するとどうなるのか?dennou2024.09.10匿名さん、こんばんは。「以前のコメントの追加~」とありますが、本記事に対する以前のコメントが多すぎてどれを指しているのかはよく分かりませんで...YouTube動画にアーティストの曲をBGM挿入するとどうなるのか?匿名2024.09.10こんにちは、以前コメントの追加なのですが同じく購入した音源が「制限なし」となる場合は大丈夫なのでしょうか?YouTube動画にアーティストの曲をBGM挿入するとどうなるのか?dennou2024.07.15木村さん、こんにちは。コメントありがとうございます。Codeを完全にアンインストールする(Windows)木村伸昭2024.07.15初めまして。VSCを完全に再インストールしたくて、貴兄のサイトにたどり着きました。詳細なご説明、ありがとうございます。Reserved.このサイトについて電脳産物@しろさとタイトルとURLをコピーしました。