0

変数「ell」のスケールパラメータが、私が作成した次の2つの円にも適用されるのはなぜか疑問に思います。

    var ell=canvas.getContext("2d")
    ell.beginPath()
    ell.lineWidth=2
    ell.fillStyle="#FFFFFF"
    ell.strokeStyle="#000000"
    ell.scale(1.2,0.5)
    ell.arc(125,190,30,0,2*Math.PI,false)
    ell.fill()
    ell.stroke()

    var circ=canvas.getContext("2d")
    circ.beginPath()
    circ.lineWidth=1
    circ.fillStyle="#FFFFFF"
    circ.strokeStyle="#000000"
    circ.arc(150,95,15,0,2*Math.PI,false)
    circ.fill()
    circ.stroke()

    var circ2=canvas.getContext("2d")
    circ2.beginPath()
    circ2.fillStyle="#1d1d1d"
    circ2.arc(155,90,4,0,2*Math.PI,false)
    circ2.fill()

眼球で、最初の形は楕円形で、次の2つは円であるはずですが、スケールコマンドで押しつぶされており、位置もずれています。

助けてくれてありがとう！

4

1 に答える 1

0

setTransform を使用してスケールを手動でリセットするか、スケールを適用する前に save() を呼び出し、終了したら restore() を呼び出すことができます。

var ctx=canvas.getContext("2d")
ctx.save(); // save the context state
ctx.beginPath();
ctx.lineWidth=2;
ctx.fillStyle="#FFFFFF";
ctx.strokeStyle="#000000";
ctx.scale(1.2,0.5);
ctx.arc(125,190,30,0,2*Math.PI,false);
ctx.fill();
ctx.stroke();
ctx.restore(); // restore the state to the last save()

// you can reuse the same context
ctx.save();
ctx.beginPath();
draw the second circle...

https://developer.mozilla.org/en/Canvas_tutorial/Transformationsを ご覧ください

于 2011-10-20T23:21:28.237 に答える