Question

我使用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);

问题是在写入下一个计数器值之前文本未被清除。它呈现在计数器的先前值之上。我怎么解决这个？提前谢谢。

Answer 1

您可以使用clearRect方法清除画布，如下所示：

:set syntax=whitespace

Answer 2

在HTML5中，画布形状（包括文本）会立即像素化（栅格化），一旦绘制就无法编辑。摆脱你绘制的东西的唯一方法是清除MUG4N建议的绘制区域。如果您想稍后编辑形状，则需要使用HTML5库，例如KineticJS，它已经构建了保留形状的变通方法，或者使用SVG。

在渲染下一个之前，html5 canavas strokeText中的明文

2 个答案: