javascript - 如何根据输入值绘制多个矩形？

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>

使用上面的所有代码，两个矩形都不会呈现。我想要两个矩形，第一个基于宽度/高度字段中的数值呈现，第二个基于与下拉框中选择的值匹配的尺寸在第一个矩形上呈现并居中。

标签： javascripthtmlcanvas

Answer 1

这是因为画布的 z-index 对于每个矩形都是相同的。尝试使用诸如 3000、2000、1000 之类的值将其移动到您的 switch/case 构造中。

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>