javascript - ctx.fillRect 值更改不起作用

Question

这是 JS http://jsfiddle.net/T2zsM/我只能在单击增量时更改 ctx.fillRect 的值，但它不适用于减量。

var Canvas = document.getElementById("Fruits");
var btnnum = document.getElementById("Number");
var btnDec = document.getElementById("decrease");
var btnInc = document.getElementById("increase");
btnnum.value = 10;
var ctx = Canvas.getContext("2d");
ctx.fillRect(0, 0, 20, btnnum.value);
ctx.fillStyle = "#FF0000";
var poleBar = function (tempVal) {
    ctx.fillRect(0, 0, 20, tempVal);
    ctx.fillStyle = "#FF0000";
}
var inc = function () {
    btnnum.value = parseInt(btnnum.value) + 1;
    poleBar(btnnum.value);
}
var dec = function () {
    btnnum.value = parseInt(btnnum.value) - 1;
    poleBar(btnnum.value);
}
btnInc.addEventListener("click", inc, false);
btnDec.addEventListener("click", dec, false);

Answer 1

您没有清除 Canvas ，因此绘制的内容不会消失，您可以使用 clearRect 删除绘制的内容

var poleBar=function(tempVal){
    ctx.clearRect(0, 0, Canvas.width, Canvas.height);
    ctx.fillRect(0, 0, 20, tempVal);
    ctx.fillStyle = "#FF0000";
}

FIDDLE

清除 Canvas 的另一种方法是重置它的宽度，就像这样

Canvas.width = Canvas.width;

作为旁注，您应该始终将基数与 parseInt 一起使用，例如 parseInt(btnnum.value, 10)