Question

在HTML5画布元素上绘图时，是否可以保持部分不受影响？您是否可以参与该部分图像，然后重新绘制该部分（如果不能直接实现）？

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

我希望在保留ui的同时绘制游戏场景。不幸的是，提前订单并不是事先知道的。

Answer 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

Answer 2

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

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">                 -
-------------------------------------------------------

Answer 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。

保留画布的一部分

3 个答案: