单击链接时画布变量不更新

Question

查看链接：http://jndgn.com/colortheory/bezold.html

单击导航中的“大条纹”链接时，我试图简单地更新其下方画布中彩色条纹的数量。变量“stripeNum”设置为 100，单击时应通过以下方式更改为 20：

$(function(){
  $("#stripes").on("click",function(e){
    e.preventDefault();

    if(stripeNum == 100) {
        stripeNum = 20;
    } else {
        stripeNum = 100;
    }       
  });
})

...但是单击时，不会发生任何操作。我是否需要让画布自行更新？这里有点 HTML5 菜鸟。提前感谢您的任何想法。

附上JSFiddle 以便于代码透明。

Answer 1

您需要重新绘制画布，并在执行此操作时将其清除。你可以简单地做这个调整，你会很好：

首先，将你拥有的画布绘图包装在一个函数中：

var contextFill = function() {
  context.clearRect(0, 0, canvas.width, canvas.height); // Clear on draw
  for (var i = 0; i < stripeNum + 1; i++) {
    context.beginPath();
    context.rect(0, i * canvas.height / stripeNum, canvas.width, canvas.height / (2 * stripeNum));
    context.fillStyle = randomColor;
    context.fill();
   }
}

然后，在文档准备好时致电contextFill()。我对上面的唯一添加是context.clearRect，用于清除画布。

最后，在调用较大的条纹时也调用它，例如：

...
if (stripeNum == 100) {
     stripeNum = 20;
} else {
     stripeNum = 100;
}    
contextFill();

如果您想在窗口调整大小时更新画布，您可以在窗口上观看resize 事件。缺点是它可能会发生多次，具体取决于用户调整大小的方式。您可以使用像lodash 这样的库来确保每N 毫秒只调用一次函数。例如：

window.addEventListener('resize', _.debounce(function() {
     contextFill();
}, 500));