キャンバス上にいくつかの長方形を描くことになっているアプリケーションを開発しています。アイデアは、それぞれを最後の側に置いて描画することです。つまり、もう一方が終了するところから描画を開始します。
入力から値を取得するボタンを作成しました。これは簡単な部分でした。この値を配列に追加しますが、ボタンを押すたびに、配列は再び空になります。「インスタンス変数」が必要だと聞きましたが、今はかなり迷っています。
どんな助けでも大歓迎です。これはコードです
function corta() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var medida1 = document.getElementById('medida2').value;
var medida2 = document.getElementById('medida1').value;
var corte1 = Math.round(medida1);
var corte2 = Math.round(medida2);
var arrayAncho = [];
var arrayLargo = [];
var ancho = 0;
var largo = 0;
arrayLargo.push(medida2);
arrayAncho.push(medida1);
//ancho, largo
document.getElementById('medida2').onclick = function () { this.value = ''; };
document.getElementById('medida1').onclick = function () { this.value = ''; };
//metodo para el ancho
for (var i = 0; i < arrayAncho.length ; i++) {
ancho += arrayAncho[i];
}
if (arrayAncho.length == 1) {
ctx.fillStyle = "#58FA58";
ctx.fillRect(0, largo, corte1, corte2);
} else
if (medida1 > 122 - ancho) {
ctx.fillStyle = "#58FA58";
ctx.fillRect(ancho, largo, corte1, corte2);//ancho, largo
}
medida1 = 0;
medida2 = 0;
}