Как нарисовать несколько прямоугольников на основе входных значений?

Question

Я пытаюсь создать небольшую форму, в которой я могу поместить разные значения и нарисовать два прямоугольника с прямоугольником, выбранным из выпадающего списка, центрированного внутри прямоугольника, нарисованного со значениями из полей свободного текста.

Первый прямоугольник из полей со свободным текстом будет нарисован, но только если код для рисования второго прямоугольника из выпадающего списка будет удален.Я думал, что было бы проще использовать оператор switch для рисования второго прямоугольника, но не уверен, должен ли он быть помещен в ту же функцию.Я довольно новичок в JS, поэтому я не знаю, что лучше всего сделать.

function updateForm(width, height, box) {
     "use strict";
     var x = 50;
     var y = 50;
     var canvas = document.createElement("canvas"); //Create a canvas 
     //Set canvas width/height
     canvas.style.width = "100%";
     canvas.style.height = "100%";
     // Set canvas drawing area width/height
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     //Position canvas
     canvas.style.position = "absolute";
     canvas.style.left = 0;
     canvas.style.top = 350;
     canvas.style.zIndex = 100000;
     canvas.style.pointerEvents = "none"; 
     document.body.appendChild(canvas); //Append canvas to body element
     var context = canvas.getContext("2d");
     //Draw rectangle
     context.rect(x, y, height*50, width*50);
     context.fillStyle = "blue";
     context.fill();
       switch (box) {
        case 'three-two': 
          context.rect(x, y, 150,200);
          context.fillStyle = "green";
          context.fill();
        break;
        case 'four-six': 
          context.rect(x, y, 200,300);
          context.fillStyle = "red";
          context.fill();
        break;
        case 'five-four': 
          context.rect(x, y, 250,200);
          context.fillStyle = "orange";
          context.fill();
        break;
        default:
        alert("The value supplied is out of range!");
        break;
        }
     }

    function draw() {
    var width = document.getElementById("wid").value;
    var height = document.getElementById("hgt").value;
    var box = document.getElementById("boxSize").value;
    updateForm(width, height, box);
    }

<div class="container">
    <form id="areaform">
    <label for="wid">Width:</label>
    <input id="wid" type="number">
    <label for="hgt">Length:</label>
    <input id="hgt" type="number">
    <label for="boxSize">Box Size</label>
    <select id="boxSize" name="boxSize">
      <option value="three-two">3x2</option>
      <option value="four-six">4x6</option>
      <option value="five-four">5x4</option>

    </select>

    <button onclick="draw()" type="button">Draw Rectangle</button>
    </form>
    </div>

При всем приведенном выше коде ни один прямоугольник не будет отображаться.Я хочу, чтобы два прямоугольника отображались с первым, основанным на числовых значениях из полей ширины / высоты, а вторым - поверх первого прямоугольника и по центру на основе моих размеров, соответствующих выбранному значению из выпадающего списка.

Answer 1

Это потому, что z-индекс холста одинаков для каждого прямоугольника.Попробуйте переместить это внутри вашей конструкции switch / case со значениями вроде 3000, 2000, 1000.

function updateForm(width, height, box) {
     "use strict";
     var x = 50;
     var y = 50;
     var canvas = document.createElement("canvas"); //Create a canvas 
     //Set canvas width/height
     canvas.style.width = "100%";
     canvas.style.height = "100%";
     // Set canvas drawing area width/height
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     //Position canvas
     canvas.style.position = "absolute";
     canvas.style.left = 0;
     canvas.style.top = 350;
     canvas.style.pointerEvents = "none"; 
     document.body.appendChild(canvas); //Append canvas to body element
     var context = canvas.getContext("2d");
     //Draw rectangle
     context.rect(x, y, height*50, width*50);
     context.fillStyle = "blue";
     context.fill();
       switch (box) {
        case 'three-two': 
          canvas.style.zIndex = 3000;
          context.rect(x, y, 150,200);
          context.fillStyle = "green";
          context.fill();
        break;
        case 'four-six': 
          canvas.style.zIndex = 2000;
          context.rect(x, y, 200,300);
          context.fillStyle = "red";
          context.fill();
        break;
        case 'five-four': 
          canvas.style.zIndex = 1000;
          context.rect(x, y, 250,200);
          context.fillStyle = "orange";
          context.fill();
        break;
        default:
        alert("The value supplied is out of range!");
        break;
        }
     }

    function draw() {
    var width = document.getElementById("wid").value;
    var height = document.getElementById("hgt").value;
    var box = document.getElementById("boxSize").value;
    updateForm(width, height, box);
    }

<div class="container">
    <form id="areaform">
    <label for="wid">Width:</label>
    <input id="wid" type="number">
    <label for="hgt">Length:</label>
    <input id="hgt" type="number">
    <label for="boxSize">Box Size</label>
    <select id="boxSize" name="boxSize">
      <option value="three-two">3x2</option>
      <option value="four-six">4x6</option>
      <option value="five-four">5x4</option>

    </select>

    <button onclick="draw()" type="button">Draw Rectangle</button>
    </form>
    </div>

Answer 2

Некоторые проблемы:

• В комментарии есть новая строка, в которой element стоит на отдельной строке.Это вызывает ошибку
• draw - локальная функция, поэтому на нее нельзя ссылаться из HTML.Это должна быть глобальная функция.
• Ваши квадраты получают последний примененный цвет заливки.Вам нужно начинать каждый новый прямоугольник с context.beginPath(), чтобы избежать этого.
• ширина и высота указываются в обратном порядке

Затем, когда вы хотите центрировать второй прямоугольник,Вы должны рассчитать, какие соответствующие координаты x и y должны быть основаны на размере обоих прямоугольников.

Вот ваш код с этими исправлениями:

function updateForm(width, height, box) {
     "use strict";
     var x = 50;
     var y = 50;
     var canvas = document.createElement("canvas"); //Create a canvas element
     //Set canvas width/height
     canvas.style.width = "100%";
     canvas.style.height = "100%";
     // Set canvas drawing area width/height
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     //Position canvas
     canvas.style.position = "absolute";
     canvas.style.left = 0;
     canvas.style.top = 350;
     canvas.style.zIndex = 100000;
     canvas.style.pointerEvents = "none"; 
     document.body.appendChild(canvas); //Append canvas to body element
     var context = canvas.getContext("2d");
     //Draw rectangle
     context.beginPath();
     context.fillStyle = "blue";
     console.log('----------------');
     console.log(x, y, width*50, height*50);
     context.rect(x, y, width*50, height*50);
     context.fill();
     context.beginPath();
       switch (box) {
        case 'three-two':
          console.log(x+(width-3)*25, y+(height-4)*25, 150, 200);
          context.rect(x+(width-3)*25, y+(height-4)*25, 150, 200);
          context.fillStyle = "green";
        break;
        case 'four-six': 
          context.rect(x+(width-4)*25, y+(height-6)*25, 200, 300);
          context.fillStyle = "red";
        break;
        case 'five-four': 
          context.rect(x+(width-5)*25, y+(height-4)*25, 250, 200);
          context.fillStyle = "orange";
        break;
     }
     context.fill();
}

function draw() {
    var width = document.getElementById("wid").value;
    var height = document.getElementById("hgt").value;
    var box = document.getElementById("boxSize").value;
    updateForm(width, height, box);
}

<div class="container">
  <form id="areaform">
    <label for="wid">Width:</label>
    <input id="wid" type="number">
    <label for="hgt">Length:</label>
    <input id="hgt" type="number">
    <label for="boxSize">Box Size</label>
    <select id="boxSize" name="boxSize">
      <option value="three-two">3x2</option>
      <option value="four-six">4x6</option>
      <option value="five-four">5x4</option>
    </select>
    <button onclick="draw()" type="button">Draw Rectangle</button>
  </form>
</div>

Я не касался механизма, который вы использовали для создания нового холста, каждый раз, когда пользователь нажимает кнопку, каждый холст перекрывает предыдущий.Имейте в виду, что фон холста прозрачен, поэтому потенциально вы все еще можете видеть части ранее сгенерированной пары прямоугольников рядом с новыми.

Если вы не хотите, чтобы это происходило, просто создайтеодин элемент canvas в статическом HTML, и не генерируйте его динамически.