Javascript HTML5画布调用同一函数两次？

我在这里感到非常困惑，尽管我对HTML5画布非常陌生

基本上我有这个功能：

function drawcircle(x,y)
{
    context.save();
    context.strokeStyle = '#00ff00';
    context.fillStyle = '#000000';
    context.lineWidth=10;
    context.beginPath();
    context.arc(x,y,50,0,Math.PI * 2,false)
    context.stroke();
    context.fill();
    context.endPath();
    context.restore();
}

然后我试着这样叫它两次：

    // call the initialise and draw functions
initialise();
drawcircle(100, 100);
drawcircle(100, 200);

---

然而，它似乎只会绘制第一个圆，无论第一个圆的绘制顺序是什么，而不是第二个圆，我该如何进行补救？

应该是

closePath（）

，而不是

endPath（）

，您的函数在

.restore（）之前会出错

因此它永远不会被调用，第二次调用的状态将与前一次调用的状态相同

function drawcircle(x,y)
{
    context.save();
    context.strokeStyle = '#00ff00';
    context.fillStyle = '#000000';
    context.lineWidth=10;
    context.beginPath();
    context.arc(x,y,50,0,Math.PI * 2,false)
    context.stroke();
    context.fill();
    context.closePath(); //Changed
    context.restore();
}

---

您应该始终检查javascript控制台是否有错误。

它应该是

closePath（）

，而不是

endPath（）

，您的函数将在

.restore（）

之前出错，因此它永远不会被调用，第二次调用的状态将与前一次调用的状态相同

function drawcircle(x,y)
{
    context.save();
    context.strokeStyle = '#00ff00';
    context.fillStyle = '#000000';
    context.lineWidth=10;
    context.beginPath();
    context.arc(x,y,50,0,Math.PI * 2,false)
    context.stroke();
    context.fill();
    context.closePath(); //Changed
    context.restore();
}

---

你应该经常检查javascript控制台是否有错误。

Bah我真是个傻瓜，谢谢你的帮助！呸，我真是个傻瓜，谢谢你的帮助！