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

次に、次のように2回呼び出します。

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

ただし、最初の円が描画されるのは一見、最初の円が描画される順序が何であれ、2番目の円は描画されないように見えますが、これを修正するにはどうすればよいですか？

4

1 に答える 1

1

これは、関数が以前にエラーになるのclosePath()ではなく、呼び出されないようにする必要があります。2番目の呼び出しは、前の呼び出しから残った状態で発生します。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 に答える