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

你没有清除画布，所以绘制的内容不会消失，你可以使用clearRect删除所绘制的内容

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

FIDDLE

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

Canvas.width = Canvas.width;

作为旁注，您应该始终使用带有parseInt的基数，例如parseInt(btnnum.value, 10)

Answer 2

看看http://jsfiddle.net/T2zsM/2/ 在绘制画布之前，需要使用此行ctx.clearRect(0,0,20,100);

清除它

ctx.fillRect值更改无效

2 个答案: