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/