如何调整 HTML5 画布上已关闭的路径的大小？答案

【问题标题】：How do I resize a path already closed on an HTML5 canvas?如何调整 HTML5 画布上已关闭的路径的大小？
【发布时间】：2013-01-03 23:32:36
【问题描述】：

我在画布上渲染了一条二次曲线。我想通过 window.setInterval 对其进行动画处理，然后更改它的尺寸（注意不是简单地更改它的比例）。

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

【问题讨论】：

一旦您在canvas 上绘制了像素，它就不会保留对象表示。如果您想操作对象而不是像素，请使用 SVG 或 use a library
所以不可能“重绘”画布上已经可见的路径？还是有另一种方法，例如删除旧的并在其位置上放置一个新的？
不，一旦绘制它就只是像素。 canvas 中的动画是通过清除像素并绘制新的、略有不同的像素来实现的。
您可以清除画布并使用不同的参数重新绘制路径。如果您有不想清除的内容，只需将路径放在它自己的画布上即可。

标签： html path html5-canvas dynamic-resizing 2d-context-api

【解决方案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/

【讨论】：