保留画布的一部分答案

【问题标题】：Preserving part of a canvas保留画布的一部分
【发布时间】：2011-09-29 20:40:56
【问题描述】：

在 HTML5 画布元素上绘图时，是否可以保留部分内容不变？您能否截取图像的一部分，如果不能直接重新绘制该部分？

我想到的唯一解决方案是绘制到单独的较小画布上，然后将其复制到主画布上。这是一种可行的方法吗？

我希望在保留 ui 的同时绘制游戏场景。不幸的是，抽签顺序是事先不知道的。

【问题讨论】：

您想在画布上绘制图像的裁剪部分吗？
不完全是。我想将 drawImage 的输出限制在特定区域。我可以手动过滤每个图像，然后根据坐标对其进行裁剪，但希望有一个内置的高性能解决方案。

标签： javascript html canvas html5-canvas

【解决方案1】：

我猜你正在寻找.clip:http://jsfiddle.net/eGjak/122/。

ctx.rect(100, 50, 200, 100);          // make a region
ctx.clip();                           // constrain to that region
ctx.drawImage($("img").get(0), 0, 0); // draw image

【讨论】：

这似乎正是我想要的，但是，它降低了我的表现。它使 chrome 完全没有响应。这是一个非常缓慢的动作吗？一次框架不可行吗？
@Venatu：我在我的渲染器中使用它，每帧调用它大约 80 次，这不是瓶颈。事实上，它似乎比绘制完整图像（没有剪辑）更快。顺便说一句，您使用的是 beta/dev 频道吗？那里为画布启用了 GPU，这导致性能很糟糕，至少我正在经历这种情况。
值得注意的是：如果你需要裁剪一个复杂的区域，你可以使用定向曲线来实现。 example
@ellisbben：非常有趣，但没有意识到这一点。感谢分享！
@pimvdb 是的，我正在使用测试版通道。生病切换到马厩并发布结果。使用 requestAnimationFrame 可以使其响应速度更快，尽管幅度不大。看起来像你所说的一个错误

【解决方案2】：

在另一个画布上绘制 UI。如果需要，您可以对画布元素进行分层。

HTML

<div id="gameframe">
    <canvas id="game-ui"></canvas>
    <canvas id="game"></canvas>
</div>

CSS

#gameFrame { position: relative; width: 800px; height: 800px;}
#game-ui { position: absolute; z-index: 10; bottom: 0; left; 0; height: 50px; width: 100%;}
#game { position: absolute; z-index: 5; height: 100%; width: 100%;}

产量

-------------------------------------------------------
-                                                     -
-                                                     -
-                                                     -
-                <canvas id="game">                   -
-                                                     -
-                                                     -
-                                                     -
-                                                     -
-------------------------------------------------------
-               <canvas id="game-ui">                 -
-------------------------------------------------------

【讨论】：

【解决方案3】：

在创建 Canvas 游戏时，我总是将 GUI 分层放在游戏画布之上。

#ui{position: fixed; margin-left: auto; margin-right: auto; z-index: 1000; width: 500; height: 500}
#game{position: fixed; margin-left: auto; margin-right: auto; z-index: 999}

<div id="ui"><!--UI elements--></div>
<canvas id="game" width="500" height="500"></canvas>

显然，您可以在顶部放置另一个画布，或者使用 html 元素构建 UI。

【讨论】：