html5 canvas - 保存路径或剪辑区域以便重用

Question

我正在我正在开发的游戏中实现2d可变形地形效果,并且它可以正常运行,但我可以设想它变得非常快,因为我开始添加更多层效果.

现在我正在寻找的是一种可能保存路径或剪贴蒙版或类似物的方法,而不必将路径的每个点存储在我需要通过每个帧绘制的地形中.随着我添加更多图层,我将不得不越过越过路径迭代,这可能包含数千个点.

一些非常简单的代码来演示我目前正在做的事情

for (var i = 0; i < aMousePoints.length; i++)
{
    cRenderContext.save();
    cRenderContext.beginPath();
    var cMousePoint = aMousePoints[i];
    cRenderContext.arc(cMousePoint.x, cMousePoint.y, 30, 0, 2 * Math.PI, false);
    cRenderContext.clip();
    cRenderContext.drawImage(cImg, 0, 0);
    cRenderContext.closePath();
    cRenderContext.restore();
}

基本上我是在一种有效的方法,在每一帧上方和上方为我的图像绘制剪贴蒙版

Answer 1

注意除了x/y位置之外,剪切区域保持完全相同.这是一个很大的优点.

剪切区域是被保存并与恢复的事情之一context.save(),并context.restore()因此可以将其保存方式(在定义它只有一次换句话说).当你想要放置它时,你将使用ctx.translate()而不是arc的x,y.

但是第二种方式可能更有效:

1. 有一个内存中的画布(从未添加到DOM或显示在页面上),仅用于包含剪切区域,并且是剪切区域的大小
2. 将剪切区域应用于此内存中画布,然后将图像绘制到此画布上.
3. 然后使用drawImage内存中的画布到您的游戏上下文中.换句话说:cRenderContext.drawImage(in-memory-canvas, x, y);其中x和y是合适的位置.

因此,裁剪区域始终保持在同一位置,并且只绘制一次.图像在剪切画布上移动,然后绘制为看起来正确,然后将内存中的画布绘制到主画布.它应该快得多,因为调用drawImage比创建和绘制路径要快得多.

作为单独的性能考虑因素,除非必须save,restore否则不要打电话.它们确实需要时间,并且在上面的循环中它们是不必要的.

如果您的代码是开源的,请告诉我,如果您愿意,我会一般性地看一下它的性能.

Answer 2

为什么不为前景设置一个画布,为背景设置一个画布？像下面的演示一样

前景/背景演示(我可能有点过分进行演示:？我喜欢搞乱JS /画布.

但基本上前景画布除了内容之外是透明的,因此它就像在背景画布上的掩模一样.

Answer 3

看起来现在可以使用新的path2D对象.

新的Path2D API(可从Firefox 31+获得)允许您存储路径,这简化了画布绘制代码并使其运行更快.构造函数提供了三种创建Path2D对象的方法:

new Path2D();     // empty path object
new Path2D(path); // copy from another path
new Path2D(d);    // path from from SVG path data

第三个版本,它采用SVG路径数据构建,特别方便.您现在可以重新使用SVG路径直接在画布上绘制相同的形状:

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

信息来自Mozilla官方网站.