HTML5 Canvas绘图基本线。这是一个错误吗？

Question

我试图在html5中绘制一个简单的行并注意到以下问题。

以下代码效果很好。正确绘制线

    topcanvas = document.getElementById("topborder");
topcontext = topcanvas.getContext("2d");

topcontext.clearRect(0, 0, topcanvas.width, topcanvas.height);
    topcontext.moveTo(1, 0);
    topcontext.lineTo(4,0);
    topcontext.lineWidth = 3;
topcontext.strokeStyle = "#ff0000";
topcontext.stroke();

下面的代码应该完全相同，但不确定为什么，它绘制第一行，然后我没有看到任何变化。输出是从（1000,0）到（4,0）的行，我希望最终结果是（1,0）到（4,0）

    topcanvas = document.getElementById("topborder");
topcontext = topcanvas.getContext("2d");

    topcontext.clearRect(0, 0, topcanvas.width, topcanvas.height);
    topcontext.moveTo(1000, 0);
    topcontext.lineTo(4,0);
    topcontext.lineWidth = 3;
topcontext.strokeStyle = "#ff0000";
topcontext.stroke();

topcontext.clearRect(0, 0, topcanvas.width, topcanvas.height);
    topcontext.moveTo(1, 0);
    topcontext.lineTo(4,0);
    topcontext.lineWidth = 3;
topcontext.strokeStyle = "#ff0000";
topcontext.stroke();

画布宽度为1000，高度为3

Answer 1

要清除画布，请执行以下操作：

topcanvas.width=topcanvas.width;