ラジオが異なる機能からチェックされているときに同じキャンバスの形状を表示

Question

私のタイトルがちょっと混乱している場合は納得いかないでしょうが、私が手を差し伸べるのは、ストロークの色を変えたいと思っていて、最初のステップから選択された形状。

私はさまざまなリソースを使い、明らかにそれらを組み合わせて混乱しました。

これは私のhtml、home.htmlです：これは、それは別のファイルにあります私のスクリプトですdesign.js

// These are my choices for the first step in designing. 
    <input type="radio" id="shape1" name="shape_design" onchange="display()" /> circle 
    <input type="radio" id="shape2" name="shape_design" onchange="display()" /> rectangle 
    //2nd step, choose color 
    <input type="radio" id="color1" name="color_design" onchange="display()" /> RED 
    <input type="radio" id="color2" name="color_design" onchange="display()" /> BLUE 

<canvas id="displaycanvas" height="450px" width="820px" style="position:absolute;"> </canvas> 

：私が起こることを望んでいた何

function display() { //I have a main function since I'm adding amount (which i got it) 
var canvas = document.getElementById('displaycanvas'); 
context = canvas.getContext('2d'); 
context.clearRect(0, 0, canvas.width, canvas.height); 

    function Shape_display(){ //shape function 
    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, 50, 100); context.stroke(); } 
    } 


    function Color_display(){ //color function 
    if (document.getElementById('color1').checked) { //for the red 
     if (Shape_display() == checked('shape1')) { //This isn't working, to check from the previous choice 
      context.beginPath(); 
      context.arc(95,50,40,0,2*Math.PI); 
      context.strokeStyle = 'red'; 
      context.stroke();  } 

     else { 
      (Shape_display() == checked('shape2')) { //same here 
      context.beginPath(); 
      context.rect(50, 27, 50, 100); context.stroke(); 
      context.strokeStyle = 'red'; 
      context.stroke();  } 
     } 
    } 
} 

はこのようなものです： IMAGE SAMPLE

誰かが私を助けてくれることを望む正しいコードが何であるか分かりません。 あまりにも大変ありがとうございます！

Answer 1

ここに行く！ 私はあなたのためにそれを簡略化しました。あなたが作った

3つのエラー：

• あなたはColor_display()を呼び出していませんでした。
• Color_displayおよびShape_displayは冗長であった。
• Shape_display何も返されませんでしたが、戻り値が何であるかを確認していました。

とにかく、あなたがそれを好き願っています：

function display() { //I have a main function since I'm adding amount (which i got it) 
 
var canvas = document.getElementById('displaycanvas'); 
 
context = canvas.getContext('2d'); 
 
context.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    if(document.getElementById('color1').checked){ 
 
     context.strokeStyle="#FF0000"; 
 
    } else if(document.getElementById('color2').checked){ 
 
     context.strokeStyle="#0000FF"; 
 
    } 
 
    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, 50, 100); 
 
      context.stroke(); } 
 
}

<canvas id="displaycanvas"></canvas> 
 
// These are my choices for the first step in designing. 
 
<input type="radio" id="shape1" name="shape_design" onchange="display()" /> circle 
 
<input type="radio" id="shape2" name="shape_design" onchange="display()" /> rectangle 
 

 

 
//2nd step, choose color 
 
<input type="radio" id="color1" name="color_design" onchange="display()" /> RED 
 
<input type="radio" id="color2" name="color_design" onchange="display()" /> BLUE