Question

请参阅链接：http://jndgn.com/colortheory/bezold.html

当点击导航中的'Bigger Stripes'链接时，我试图简单地更新它下面画布中彩色条纹的数量。变量'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));

单击链接时Canvas变量不更新

1 个答案: