0

I have a quadratic curve rendered on a canvas. I want to animate it by means of window.setInterval and changing it's dimensions (note not simply changing it's scale) thereafter.

How do I retain an editable reference to the path after calling context.closePath()?

4

1 に答える 1

0

Path新しいオブジェクトでパスへの参照を維持することをお勧めします。そうすれば、x、y、ポイントなどをその場で変更して、各アニメーションステップをレンダリングできます。

var testPath = new Path(100, 100, [[40, 40], [80, 80]]);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function Path(x, y, points)
{
    this.x = x;
    this.y = y;
    this.points = points;
}

function update()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = 'red';
    ctx.moveTo(testPath.points[0][0], testPath.points[0][1]);
    for (var i = 1; i < testPath.points.length; i++)
    {
        ctx.lineTo(testPath.points[i][0], testPath.points[i][1]);
    }
    ctx.stroke();
    testPath.points[1][1]++; // move down

    // loop
    requestAnimationFrame(update);
}

update();​

何らかの理由で、JSFiddle は Paul Irish の requestAnimationFrame ポリフィルとうまく動作しませんが、ローカルでは動作するはずです。setInterval よりもこれをお勧めします。

http://jsfiddle.net/d2sSg/1/

于 2013-01-03T15:32:36.337 に答える