单击链接时Canvas变量不更新

时间:2013-08-21 02:21:27

标签: javascript jquery html5 canvas refresh

请参阅链接: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附加了代码透明度。

1 个答案:

答案 0 :(得分: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));