單擊鏈接時畫布變量未更新

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));