javascript - 使用单选按钮显示/隐藏 Canvas

Question

我是 Javascript 和 Canvas 的新手，我使用过很多资源，但现在我很困惑。我正在使用 Canvas 进行服装定制。 这是我的 HTML:

 //these are my button samples
<input type="radio" id="shape1" name="round" onchange="display()" /> 
<input type="radio" id="shape2" name="box" onchange="display()" />

// this is where I'll display the canvas
<canvas id="displaycanvas" height="450px" width="820px" style="position:absolute;"> </canvas>

所以对于我的 Javascript 我有这个:

  function display() { 
    if (document.getElementById('shape1').checked) {
      var canvasC = document.getElementById('displaycanvas'),
          context = canvasC.getContext('2d');
           context.beginPath();
           context.arc(95,50,40,0,2*Math.PI);
           context.stroke();     }

    if (document.getElementById('shape2').checked) {
      var canvasR = document.getElementById('displaycanvas'),
          context = canvasR.getContext('2d');
            context.beginPath();
            context.rect(50, 27, 350, 400);    }
}

它们都工作正常，如果我选择这些按钮之一，它会显示形状。我关心的是如何一次仅显示 1 个形状。

我不确定切换是否正确，请告诉我正确的做法是什么。预先非常感谢您，

Answer 1

您需要为 radio 指定相同的名称才能切换它们，并且还需要清除 Canvas 。

我现在对 Canvas 使用了相同的名称

window.onload = function() {
  document.querySelector("#shape1").onclick = document.querySelector("#shape2").onclick = function() {
    var canvas = document.querySelector('#displaycanvas');
    context = canvas.getContext('2d');
    context.clearRect(0,0,canvas.width,canvas.height);
    context.beginPath();
    if (this.id == "shape1") {
      context.arc(95, 50, 40, 0, 2 * Math.PI);
    } else {
      context.rect(50, 27, 350, 400);
    }
    context.stroke();
  }
}

<input type="radio" id="shape1" name="shape" value="round" />
<input type="radio" id="shape2" name="shape" value="box" />
<canvas id="displaycanvas" height="450px" width="820px" style="position:absolute;"></canvas>

如果你想要两 block Canvas ，你可以这样做

window.onload = function() {
  document.querySelector("#shape1").onclick = function() {
    document.querySelector('#displaycanvas1').style.display="";
    document.querySelector('#displaycanvas2').style.display="none";
  }
  document.querySelector("#shape2").onclick = function() {
    document.querySelector('#displaycanvas2').style.display="";
    document.querySelector('#displaycanvas1').style.display="none";
  }
}

仍然给 radio 提供相同的名称