1

我在这里变得非常困惑，尽管我对 HTML 5 画布很陌生。

基本上我有这个功能：

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

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

4

1 回答 1

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 控制台是否有错误。

于 2012-11-29T09:32:43.470 回答