ラジオボタンを使用してキャンバスを表示/非表示

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

ラジオに同じ名前を付けてトグルする必要があり、キャンバスもクリアする必要があります。

私はあなたが2つのキャンバスをしたい場合は、今

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