Можно ли при рисовании элемента холста HTML5 оставить его часть нетронутой? Можете ли вы взять часть изображения, а затем перерисовать эту часть, если это невозможно напрямую?
Единственное решение, о котором я подумал, - это нарисовать на отдельном холсте меньшего размера, а затем скопировать его на основной холст. Это осуществимый подход?
Я хочу нарисовать игровую сцену, сохранив пользовательский интерфейс. К сожалению, порядок розыгрыша заранее неизвестен.
Думаю, вы ищете .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
Нарисуйте пользовательский интерфейс на другом холсте. При необходимости вы можете наслаивать элементы холста.
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"> -
-------------------------------------------------------
При создании игр на холсте я всегда размещал графический интерфейс поверх холста игры.
#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.
