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

您需要为无线电设备指定相同的名称以切换它们，您还需要清除画布。

我现在为画布使用了相同的名称

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>

如果你想要两幅画布，你可以这样做

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";
  }
}

仍然给收音机命名相同

Answer 2

如果单选按钮具有相同的name属性，则它们将在可用按钮之间切换。如果它们具有不同的name属性，则它们将分别进行分组。

＆＃13;

function display() {
  var s1 = document.querySelector('#shape1').checked,
      s2 = document.querySelector('#shape2').checked;
  alert("shape1: " + s1 + ", shape2: " + s2)
}

function display2() {
  var s3 = document.querySelector('#shape3').checked,
      s4 = document.querySelector('#shape4').checked;
  alert("shape3: " + s3 + ", shape4: " + s4)
}

＆＃13;

1-2
<input type="radio" name="shape" value="shape1" id="shape1" onclick="display()" />
<input type="radio" name="shape" value="shape2" id="shape2" onclick="display()" />

<br /><br />

3-4
<input type="radio" name="round" value="shape3" id="shape3" onclick="display2()" />
<input type="radio" name="square" value="shape4" id="shape4" onclick="display2()" />

＆＃13;

Answer 3

您可以使用以下代码来满足您的要求：

＆＃13;

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

＆＃13;

<input type="radio" id="shape1" name="round[]" onchange="display()" /> 
<input type="radio" id="shape2" name="round[]" onchange="display()" />

<canvas id="displaycanvas" height="450px" width="820px" style="position:absolute;"> </canvas>

＆＃13;

使用单选按钮显示/隐藏画布

3 个答案: