回転長方形は、私は次の操作を実行するJavaScript関数を実装しようとしている

Question

を必要としていました。 要求された数の入力矩形（ランダムな幅と高さを持つ）を生成し、ファイル（人間が判読可能）に書き出します。 ランダムに生成された入力矩形を、上記の手順で生成されたファイルから読み込みます。 例のように、入力矩形をグラフィックに正しく配置して表示します。 出力矩形を計算します。 出力矩形をグラフィカルに表示します。上の例のように正しく配置されています。注：入力矩形と出力矩形の両方を同時に表示する必要があります。 出力矩形の座標を出力ファイル（人間が読める形式）に書き込みます。

入力： ランダムな一連の矩形が、同じベースライン上で左から右に隣り合って配置されています。 出力： 入力矩形で説明されているのと同じ面積と結果の形状を表す、垂直に積み重ねられた矩形の最小数を出力します。

私はこのコードの一部を見つけましたが、今は固まっていますが、この実装すべてで動作するようにはできません。どのように3から30までの入力値を追加できますか？どのように結果が同時に入力と出力を表示するのでしょうか？

いずれのヒントも本当に感謝しています。

<script> 
function doit() { 
drawRectangle(100, 150, 200, 100); 
myrect = document.getElementById("newdiv"); 
myrect.innerHTML= myrect.innerHTML + "<h1>howto</h1>"; 
} 

function drawRectangle(left, top, width, height) { 
if (document.createElement) { 
    newdiv=document.createElement("div"); 
    newdiv.style.position="absolute"; 
    newdiv.style.left = left+"px"; 
    newdiv.style.top = top+"px"; 
    newdiv.style.width = width+"px"; 
    newdiv.style.height = height+"px"; 
    newdiv.style.backgroundColor = 'red'; 
    newdiv.style.visibility = 'visible'; 
    newdiv.id = 'newdiv'; 
    newdiv.innerHTML = "real"; 
    document.body.appendChild(newdiv); 
    } 
} 
</script> 

Answer 1

、あなたの既存のコードを使用して、基本的な出発点を示し、あなたがしたい場合はあなたが周りにプレイするためにするために、私はJSFiddleを作成しました。描画する矩形の数を指定できるように、<input>要素を追加しました。しかし、実際にはより多くの長方形を描画するために、doitメソッドを変更する必要があります。

すべての小さな矩形のスペースを埋めるために大きな矩形を決定する幾何学的問題については、this SO questionを参照してください。

あなたはまた、彼らの大きな数字を描くために、出力と入力の長方形を分離するためにはるかに簡単になるように長方形の代わりdiv要素を描画するためにcanvasを使用して考えてもよいでしょう。..素敵な基本的なチュートリアルをすることができ見つけたhere。