javascript - 从不同功能检查 radio 时显示相同的 Canvas 形状

Question

如果我的标题有点令人困惑，请原谅，但我想要表达的是我想要更改笔画颜色，并且它应该遵循取决于第一步选择的形状的路径。

我浏览过不同的资源，显然将它们结合起来并感到困惑。

这是我的 html，home.html:

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

这是我的脚本，它位于不同的文件 design.js 中:

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

给你!我为你简化了它。

您犯的三个错误:

• 您没有调用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