content最大面積の正方形と最大面積の長方形の領域を探すJavaScriptアルゴリズムcanvases2015再帰処理どんなプログラムなのかまずは、実行例を。マウスのドラッグやクリックで、以下のように、領域の一部を塗りつぶします。Shiftキーを押しながらドラッグすれば、その領域をクリアできます。この塗りつぶした領域のなかから、最大面積となる正方形または長方形を求めるというプログラムです。それぞれのsolveボタンを押すと、結果が得られます。以下は、正方形の領域を求めたところです。薄い紫色が最大面積の正方形です。正方形であることがわかります。実際に動きを確認できるように、この記事の最後に、CodePenのページを埋め込んでいます。やって求めているか最大面積の正方形を求めるすべての地点に対し、その地点を正方形の左上としたしたときの面積を求め、一番大きなのがどれかを求めています。すごく当たり前のことをやっているだけですね。なり、△部分が増えることになります。これを繰り返していけば、正方形の辺の長さが求まることになります。再帰処理の応用としてとらえることができますね。最大面積の長方形を求める面積が最大の長方形を求める方法ですが、こちらは正方形よりも泥臭い方法で最大面積を求めています。注目している点が長方形の左上とした時の、高さが1の長方形の面積を求めます。次に高さが2の長方形の面積を求めます。求めていき、最大の長方形を求めます。これをすべての点で実行しています。Canvasのマウスイベントを処理するこのプログラムでは、HTML5のCanvasをラッピングしたMyCanvasクラスを定義しています。そこでマウスイベントに対応するための処理を書いています。MouseDownイベントに対応するために、MyCanvasクラスのコンストラクタで以下のようなコードを書いています。false;};onmousedownがCanvasに定義されているイベントハンドラです。canvas要素の左上からの座標です。これを引数にしてMyCanvasクラスの独自のonMouseDowncallback関数を呼び出しています。MouseDownベントを発行しているということですね。このイベントを処理するハンドラは、Boardクラスに以下のように定義してあります。y)を行(row)と桁(col)に変換し、ドラッグの処理を開始しています。具体的には実際のコード(後述)をみてください。</script></body></html>CodePenの埋め込み上記コードをCodePenで書いて、埋め込んでみました。マウスのドラッグで、矩形を塗りつぶせます。シフトキーを押しながらドラッグすれば、塗りつぶした領域をクリアすることができます。マウスのクリックでその位置を反転させます。Solve(正方形)ボタンで、最大の正方形を求めます。Solve(長方形)ボタンで、最大の長方形を求めます。upLoginユーザーは見つかりませんでした。