使用單選按鈕顯示/隱藏帆布

Question

我是新來的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> 

所以對我的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

如果單選鈕hav e相同的name屬性，它們將在可用的屬性之間交替。如果它們具有不同的name屬性，則它們將分開分組。

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

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()" />

Answer 3

您可以使用下面的代碼來實現您的要求：

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

<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>