Javascript表单改变画布绘制的内容

Question

我试图为我的生物课制作人体循环系统和淋巴系统的互动模型。我决定使用HTML5画布和Javascript使其工作，复选框指示要显示的器官。但是出于某些原因，表单数据在我的脚本中没有变化。以下是片段：

HTML5：

...SNIP...
<form id="form">
    <input type="checkbox" checked> <label>Body </label> <br/> <br/>
    <input type="checkbox" checked> <label> Heart </label> <br/> <br/>
    <input type="checkbox" checked> <label> Subclavian Veins </label> <br/> <br/>
    <input type="checkbox" checked> <label> Spleen </label> <br/> <br/>
    <input type="checkbox" checked> <label> Thymus </label> <br/> <br/>
    <input type="checkbox" checked> <label> Veins </label> <br/> <br/>
    <input type="checkbox" checked> <label> Arteries </label> <br/> <br/>
    <input type="checkbox" checked> <label> Lymphatic Vessels </label> <br/> <br/>
    <input type="checkbox" checked> <label> Lymphatic Nodes </label> <br/> <br/>
    <button type="submit" onclick="return change()"> Change! </button>
</form>
...SNIP...

使用Javascript：

...SNIP...
var draws = new Array(9);
for(var i = 0; i < 9; i++){
    draws[i] = true;
}

function draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.scale(4, 4);
    for(var i = 0; i < 9; i++){
        if(draws[i]) sprites[i].render();
    }
    ctx.scale(0.25, 0.25);
}
setInterval(draw, 16.6);

function change(){
    for(var i = 0; i < 9; i++){
        draws[i] = document.getElementById("form").elements[i].value == "on";
    }
    return false;
}
...SNIP...

这是一个展示问题的图片（你可以看到复选框已被取消选中，按钮已被点击，但身体和心脏仍在被绘制......）：

Answer 1

onclick="change()"不是onclick="return change()"我不确定这是否重要，但这是一种很好的做法。

然后忘记在draw()再次致电change()。否则你不会重新绘制图像。

function change(){
    for(var i = 0; i < 9; i++){
        draws[i] = document.getElementById("form").elements[i].value == "on";
    }
    draw(); //this is important
    return false;
}