Javascript 在下一步渲染之前，清除html5 canavas strokeText中的文本

我使用html5和javascript来呈现文本。我想更新在画布中绘制的文本的内容。我使用以下代码

     var drawArea = document.getElementById('drawingPlane');
            var ctx = drawArea.getContext("2d");
     ctx.font = "60px Arial";
            var counter = 0;
            function update() {
                counter++;
                ctx.strokeText(counter , 50 , 30);
            }
            setInterval(update , 1000);

问题是，在写入计数器的下一个值之前，文本未被清除。它的渲染值高于计数器的上一个值。我怎样才能解决这个问题？？ 提前感谢。

您可以使用以下方法清除画布：

<script>
    var drawArea = document.getElementById('drawingPlane');
    var ctx = drawArea.getContext("2d");
    ctx.font = "60px Arial";
    var counter = 0;
    function update() {
        ctx.clearRect ( 0 , 0 , drawArea.width, drawArea.height ); // clear canvas
        counter++;
        ctx.strokeText(counter , 50 , 30);
    }
    setInterval(update , 1000);     
</script>

var drawArea=document.getElementById（'drawingPlane'）；
var ctx=drawArea.getContext（“2d”）；
ctx.font=“60px Arial”；
var计数器=0；
函数更新（）{
ctx.clearRect（0，0，drawArea.width，drawArea.height）；//清除画布
计数器++；
ctx.strokeText（计数器，50,30）；
}
设置间隔（更新，1000）；

您可以使用以下方法清除画布：

<script>
    var drawArea = document.getElementById('drawingPlane');
    var ctx = drawArea.getContext("2d");
    ctx.font = "60px Arial";
    var counter = 0;
    function update() {
        ctx.clearRect ( 0 , 0 , drawArea.width, drawArea.height ); // clear canvas
        counter++;
        ctx.strokeText(counter , 50 , 30);
    }
    setInterval(update , 1000);     
</script>

var drawArea=document.getElementById（'drawingPlane'）；
var ctx=drawArea.getContext（“2d”）；
ctx.font=“60px Arial”；
var计数器=0；
函数更新（）{
ctx.clearRect（0，0，drawArea.width，drawArea.height）；//清除画布
计数器++；
ctx.strokeText（计数器，50,30）；
}
设置间隔（更新，1000）；

在HTML5画布中，形状（包括文本）立即被像素化（光栅化），一旦绘制就无法编辑。要删除所绘制的内容，唯一的方法是按照MUG4N的建议清除所绘制的区域。如果您想在以后编辑形状，您需要使用HTML5库，如KineticJS，它已经构建了一个保留形状的解决方案，或者使用SVG。

在HTML5画布中，形状（包括文本）立即被像素化（光栅化），一旦绘制就无法编辑。要删除所绘制的内容，唯一的方法是按照MUG4N的建议清除所绘制的区域。如果您想在以后编辑shaped，您需要使用HTML5库，比如KineticJS，它构建了一个保留形状的解决方案，或者使用SVG