如何调整HTML5画布上已经关闭的路径的大小?

Question

我在画布上渲染了一条二次曲线。我想用窗口的方式让它动起来。setInterval和改变它的尺寸(注意不是简单地改变它的比例)。

如何在调用context.closePath()后保留对路径的可编辑引用?

Answer 1

我建议您在新的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 polyfill一起工作，但它应该在本地工作。比起setInterval，我更推荐它。

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