Question

我在这里感到非常困惑，尽管我对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);

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

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

HTML5 Canvas调用相同的函数两次？

1 个答案: