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

我不熟悉Javascript和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>

它们都工作得很好，如果我选择其中一个按钮，它会显示形状。我关心的是如何一次只显示一个形状

---

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

您需要为收音机指定相同的名称以切换它们，并且您还需要清除画布

我现在已经在画布上使用了相同的名称

window.onload=function（）{
document.querySelector（“#shape1”）.onclick=document.querySelector（“#shape2”）.onclick=function（）{
var canvas=document.querySelector（'#displaycanvas'）；
context=canvas.getContext（'2d'）；
clearRect（0,0，canvas.width，canvas.height）；
context.beginPath（）；
如果（this.id==“shape1”）{
弧（95,50,40,0,2*Math.PI）；
}否则{
rect（5027350400）；
}
stroke（）；
}
}

---

您需要为收音机指定相同的名称来切换它们，并且还需要清除画布

我现在已经在画布上使用了相同的名称

window.onload=function（）{
document.querySelector（“#shape1”）.onclick=document.querySelector（“#shape2”）.onclick=function（）{
var canvas=document.querySelector（'#displaycanvas'）；
context=canvas.getContext（'2d'）；
clearRect（0,0，canvas.width，canvas.height）；
context.beginPath（）；
如果（this.id==“shape1”）{
弧（95,50,40,0,2*Math.PI）；
}否则{
rect（5027350400）；
}
stroke（）；
}
}

---

如果单选按钮具有相同的

名称

属性，则它们将在可用按钮之间切换。如果它们具有不同的

name

属性，则它们将分别分组

函数显示（）{
var s1=document.querySelector（“#shape1”）。已选中，
s2=document.querySelector（“#shape2”）。选中；
警报（“形状1:+s1+”，形状2:+s2）
}
函数display2（）{
var s3=document.querySelector（“#shape3”）。已选中，
s4=文档.querySelector（“#shape4”）。选中；
警报（“形状3:+s3+”，形状4:+s4）
}

1-2



3-4

如果单选按钮具有相同的

名称

属性，则它们将在可用按钮之间切换。如果它们具有不同的

name

属性，则它们将分别分组

函数显示（）{
var s1=document.querySelector（“#shape1”）。已选中，
s2=document.querySelector（“#shape2”）。选中；
警报（“形状1:+s1+”，形状2:+s2）
}
函数display2（）{
var s3=document.querySelector（“#shape3”）。已选中，
s4=文档.querySelector（“#shape4”）。选中；
警报（“形状3:+s3+”，形状4:+s4）
}

1-2



3-4

您可以使用以下代码来实现您的要求：

函数显示（）{
var canvasC=document.getElementById（'displaycanvas'）；
context=canvasC.getContext（'2d'）；
context.clearRect（0,0，canvasC.width，canvasC.height）；
if（document.getElementById（'shape1'）。选中）{
context.beginPath（）；
弧（95,50,40,0,2*Math.PI）；
context.stroke（）；}
if（document.getElementById（'shape2'）。选中）{
context.beginPath（）；
context.rect（50,27350400）；context.stroke（）；}
}

---

您可以使用以下代码来实现您的要求：

函数显示（）{
var canvasC=document.getElementById（'displaycanvas'）；
context=canvasC.getContext（'2d'）；
context.clearRect（0,0，canvasC.width，canvasC.height）；
if（document.getElementById（'shape1'）。选中）{
context.beginPath（）；
弧（95,50,40,0,2*Math.PI）；
context.stroke（）；}
if（document.getElementById（'shape2'）。选中）{
context.beginPath（）；
context.rect（50,27350400）；context.stroke（）；}
}

很抱歉名称上的错误，我将它们设置为相同的Name=“shape”，这应该是在值中，这就是它们不同的原因。很抱歉名称上的错误，我将它们设置为相同的Name=“shape”，这应该是在值中，这就是它们不同的原因。对不起，我检查了每个人的回答。我想它还是会被计算在内的。我再次检查了你的，是的，你是第一个，而且是正确的。我很抱歉，谢谢你通知我。谢谢-没问题。对不起，我检查了每个人的回答。我想它还是会被计算在内的。我再次检查了你的，是的，你是第一个，而且是正确的。我很抱歉，谢谢你通知我。谢谢-没问题

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