canvasに長方形を描く

2022.05.16

sakurai

2022.05.16

こんにちは。櫻井です。
今回はcanvasに長方形を描くJSを作ってみました。
canvas内でマウスを押したところを起点にして、マウスを離したところを終点にして長方形を描きます。

See the Pen drew rect in canvas by knap_develp (@knap_develp) on CodePen.

変数の定義

はじめに変数を定義していきます。
cvs はHTMLからcanvasを取得する変数です。
ctx はcanvasに図形などを描画できるようにするための変数です。
長方形を描画するときはcvsでcanvasに直接JSで描くのではなくctxでgetContext(“2d”)を挟んでから描きます。
canvasProps はcanvasの大きさを保管しておくためのオブジェクトです。初期値ではwidth、height共に0にしています。
drawRectPropsは描く長方形の情報を保管しておくためのオブジェクトです。xとyが起点、widthとheightが大きさ、styleが線の色、lineWidthが線の太さです。
初期値ではx、y、width、heightは0。styleは#000。lineWidthは4にしています。

関数の定義

次に関数を定義します。
マウスを押したところを起点に、離したところを終点にするので
addEventListenerでmousedown、mousemove、mouseupの時に発火する関数をそれぞれ用意します。
今回はmousedownの時がgetDrewRectStart、mousemoveの時がgetDrewRectPos、mouseupの時がgetDrewRectEndという名前で関数を発火するようにしました。

ついでにcanvasの初期設定も行います。
まず
canvasPropsのwidthとheightをそれぞれwindow.innerWidthとwindow.innerHeightに変更します。
次に
cvs.width = canvasProps.width;
cvs.height = canvasProps.height;
で
canvasの大きさをcanvasPropsのwidthとheightにします。
ctxの線の色と太さを設定しておきます。
ctx.strokeStyle = drawRectProps.style;
ctx.lineWidth = drawRectProps.lineWidth;

マウスを押した時と離した時のイベントを設定します。
cvs.addEventListener(‘mousedown’, getDrewRectStart, false);
cvs.addEventListener(‘mouseup’, getDrewRectEnd, false);

マウスを押した時の処理

関数の詳細を詰めていきます。
まずはマウスを押した時の処理から
はじめに
e.preventDefault();
e.stopPropagation();
でデフォルトの処理を破棄させます。
drawRectPropsのxとyを設定します。
xとyの設定にはoffsetXとoffsetYを使います。
pageXとかscreenXとかclientXとか色々ありますが今回はoffsetXです。
こちらの説明がサンプルもあってわかりやすいので参考にしてみてください。
https://qiita.com/yukiB/items/cc533fbbf3bb8372a924

ctx.clearRect(0, 0, canvasProps.width, canvasProps.height);
で押したタイミングでcanvasを一度綺麗にします。

最後にマウス押してる間だけmousemoveイベントを発火させたいので
cvs.addEventListener(‘mousemove’, getDrewRectPos, false);
を入れます。

マウスを動かした時の処理

次にマウスを動かした時の説明をしていきます。
マウスを押した時と同様にデフォルトの処理を破棄します。
次にdrawRectPropsのwidthとheightを設定していきます。
widthはcanvasのoffsetXの位置からdrawRectPropsのxを引いた値
heightはcanvasのoffsetYの位置からdrawRectPropsのyを引いた値
に変更します。
マウスを動かすたびにcanvasを綺麗にしないとcanvasが長方形で塗り潰されちゃうので
ctx.clearRect(0, 0, canvasProps.width, canvasProps.height);
で綺麗にしてから
ctx.strokeRect(drawRectProps.x, drawRectProps.y, drawRectProps.width, drawRectProps.height);
で描画します。

マウスを離した時の処理

最後にマウスを離した時の処理です。
マウスを押した時、動かした時と同様にデフォルトの処理を破棄します。
次に
cvs.removeEventListener(‘mousemove’, getDrewRectPos, false);
マウスを動かした時の処理がそのままなのでイベントの登録を解除して出来上がりです。