Команда масштабирования, применяемая к нескольким фигурам - PullRequest
Новая
       40

Команда масштабирования, применяемая к нескольким фигурам

0 голосов
/ 21 октября 2011

Хотите знать, почему параметр масштаба переменной ´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()

Предполагается, что это глазное яблоко, первая фигура - овальная иследующие два должны быть кругами, однако они уменьшаются командой масштабирования, и их позиции также сбрасываются.

Любая помощь приветствуется, спасибо !!

1 Ответ

0 голосов
/ 21 октября 2011

Вы можете использовать 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

...