Question

想知道为什么变量'el'的scale参数适用于我创建的下两个圆圈：

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

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

感谢任何帮助，谢谢！

Answer 1

您可以使用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

缩放命令适用于多个形状

1 个答案: