無法清除HTML 5中的畫布工作區

Question

不知何故，我無法在canvas標記中將canvas清除，它只清除了一部分，並且我將canvas.witdh和height作為參數。 最初，當單擊按鈕並觸發clearGraph（）函數並重新繪制時，它應該清除所有內容。 請幫幫我。 您可以從這里查看。 http://jsfiddle.net/qH2Lr/1/

    function init() {

    // data sets -- set literally or obtain from an ajax call
    var dataName = [ "You", "Competitors" ];
    var dataValue = [ 2600, 4000];
        // set these values for your data
        numSamples = 2;
        maxVal = 5000;
        var stepSize = 1000;
        var colHead = 50;
        var rowHead = 60;
        var margin = 10;
        var header = "Millions"
       var can = document.getElementById("can");
        ctx = can.getContext("2d");
        ctx.fillStyle = "black"
        yScalar = (can.height - colHead - margin) / (maxVal);
        xScalar = (can.width - rowHead) / (numSamples + 1);
        ctx.strokeStyle = "rgba(128,128,255, 0.5)"; // light blue line
        ctx.beginPath();
        // print  column header
        ctx.font = "14pt Helvetica"
        ctx.fillText(header, 0, colHead - margin);
        // print row header and draw horizontal grid lines
        ctx.font = "12pt Helvetica"
        var count =  0;
        for (scale = maxVal; scale >= 0; scale -= stepSize) {
            y = colHead + (yScalar * count * stepSize);
            ctx.fillText(scale, margin,y + margin);
            ctx.moveTo(rowHead, y)
            ctx.lineTo(can.width, y)
            count++;
        }
        ctx.stroke();
        // label samples  ctx.shadowColor = 'rgba(128,128,128, 0.5)';
        ctx.shadowOffsetX = 20;
        ctx.shadowOffsetY = 1;
        // translate to bottom of graph and scale x,y to match data
        ctx.translate(0, can.height - margin);
        ctx.font = "14pt Helvetica";
        ctx.textBaseline = "bottom";
        for (i = 0; i < 4; i++) {
            calcY(dataValue[i]);
            ctx.fillText(dataName[i], xScalar * (i + 1), y - margin);
        }
        // set a color and a shadow
        ctx.fillStyle = "green";

        ctx.scale(xScalar, -1 * yScalar);
        // draw bars
        for (i = 0; i < 4; i++) {
            ctx.fillRect(i + 1, 0, 0.5, dataValue[i]);
        }

    }

    function calcY(value) {
        y = can.height - value * yScalar;
    }

    function clearGraph() {

        var canvas = document.getElementById("can");
        var ctx = canvas.getContext("2d");

        // Will always clear the right space
        ctx.clearRect(0, 0, canvas.width, canvas.height);


    }
</script>

Answer 1

您正在對上下文進行許多更改，例如縮放和翻譯。

這些也會影響clearRect() 。 我建議在這種情況下使用save()和restore()方法。 save()存儲上下文的當前狀態 ，包括。 轉換：

ctx = can.getContext("2d");

ctx.save();    // after obtaining the context

... rest of code ...

ctx.restore(); // before clearing
ctx.clearRect(0, 0, can.width, can.height);

現在您可以看到它按預期工作：

改良的小提琴

當然，在繪制完所有內容后立即清除並不是真正的意圖，而是表明它確實有效（當您最終需要時-如果您打算重繪圖形，請先將其放在代碼中）。