Могу ли я убедиться, что пиксели не отображаются вне указанного прямоугольника в HTML5?

Question

Я хочу создать экранную функциональность в моей игре HTML5, и для этого я думаю следующий псевдокод:

//Called once per frame
function draw(){
  set a mask rectangle
  draw only pixels of current frame that are inside this rectangle
}

Я знаю, что могу проверить координаты отдельныхпикселей перед их прорисовкой, но, похоже, это окажет серьезное влияние на производительность, и мы хотим избежать этого ...

Есть ли собственный способ реализации этого с использованием методов 2D-контекста?И если да, то как?

Answer 1

Не проверяйте отдельные пиксели, просто рисуйте целые элементы, которые пересекаются с текущим видом вашего "меньшего экрана"

Некоторые примеры того, как можно добиться «экрана в экране»:

Создайте еще один (буферный) холст, представляющий экран в игре, нарисуйте его, а затем нарисуйте на главном холсте.

или

Создайте еще один элемент Canvas, который будет работать как слой, дайте ему более высокий z-индекс, чем у основного холста, добавьте его в текущее дерево DOM и нарисуйте на нем.

или

Использование клип

---

ps: эталон для рисования вне текущего видового экрана: http://jsperf.com/comparing-onscreen-offscreen-rendering-to-canvas

Answer 2

Если для рассматриваемого объекта было бы разумно иметь отдельный элемент рисования для рассматриваемого прямоугольника, то overflow: hidden (CSS) сделает это.В этом случае механизм вырезания браузера будет отвечать за отсечение.