0

见链接：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以便于代码透明。

4

1 回答 1

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));
于 2013-08-21T02:29:17.787 回答