やってみたJavaScript(0001)：　マウスクリックをcanvasで受け取る

2024年6月11日

やってみたJavaScript、今回は、マウスクリックをcanvasで受け取ってみたい。

画面上をクリックしたときに何か起きると、何かできてる感が出ることでしょう。

test0001

ということで、canvas上をクリックしたときに小さい四角を描くようにします。

https://www.hircos.work/test/test0001/

とりあえずonloadに盛る

前回の内容を極力踏襲しつつ、よく分からないのでとりあえずonloadの関数内にもりもり盛る。

    <script>
      window.onload=function(){
	  var cvs = document.getElementById("cvs1");
	  var ctx = cvs.getContext("2d");

	  ctx.fillStyle = "black";

	  cvs.addEventListener( 'click', onClick, false );

	  function onClick(e){
	      drawRect( e.clientX, e.clientY );
	  }

	  function drawRect( x, y, ){
	      ctx.fillRect( x, y, 10, 10 );
	      console.log({x,y});
	  }

      }
    </script>

とりあえず動く！

なんかずれてる

とりあえず動いたけど、クリックした箇所と描画される箇所がなんかずれてる。要調査。

とりあえずコンソールにログを出力する方法を調べたので追加しといた。

ちなみにブラウザの開発ツールで見れるみたい。Ctrl+Shift+iでFireFoxとChromeでは開いたので、ブラウザってだいたいそうなのかも。

console.log({x,y});

なんか { } で囲っておくと、変数名と値が一緒に出てくるので見やすい！

いじょ。

広告

JavaScript,tec