0

想知道为什么变量“ell”的比例参数也适用于我创建的接下来的两个圆圈：

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

它应该是一个眼球，第一个形状是椭圆形，接下来的两个应该是圆形，但是它们被缩放命令压扁了，它们的位置也被抛出了。

任何帮助表示赞赏，谢谢！

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 回答