我可以确保在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-index，将其添加到当前DOM树并在其上绘制。

或

使用clip

---

ps：绘制当前视口外部的基准：http://jsperf.com/comparing-onscreen-offscreen-rendering-to-canvas

Answer 2

如果你想到的功能对于问题overflow: hidden（CSS）的矩形有一个单独的绘图元素是合理的，那就可以了。然后，浏览器的布局引擎将负责裁剪。