javascript - HTML5 Canvas 调用同一个函数两次？

Question

虽然我对 HTML 5 Canvas 很陌生，但我在这里感到非常困惑。

基本上我有这个功能:

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);

但是它看起来只会绘制第一个圆，无论第一个圆的绘制顺序如何，但不会绘制第二个圆，我将如何解决这个问题？

Answer 1

它应该是 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();
}

http://jsfiddle.net/kwHT5/

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