屏幕外的画布是否具有与普通画布一样多的“空间”？

Question

我的情况类似于this question about copying data between canvases，但就我而言，我认为我遇到了画布引擎本身的问题，我想对我可能做错的事情有所了解/指导。

我正在创建一个与屏幕画布具有相同宽度和高度的屏幕外画布。

n

然后我从屏幕外画布画到屏幕上的画布：

  @offscreenCanvas = document.createElement('canvas')

  # assign same dimensions as onscreen canvas
  @offscreenCanvas.width  = canvas.width
  @offscreenCanvas.height = canvas.height

偏移量也是函数的参数，该函数在所有此绘图发生之前平移“实时”画布上下文。

# grab the width and height of the canvas
{ width, height } = @canvasElement
{ x, y } = offset

# copy image from layer into canvas
@context.drawImage 
  @offscreenContext.canvas, -x, -y, width, height, -x, -y, width, height

换句话说，我们试图抓取屏幕上下文的一部分，该部分对应于屏幕上下文的翻译偏移量。

这有一些问题。当偏移使“相机”远离原点移动时，会遇到屏幕外画布的“边缘”。

请注意，当我对屏幕画布执行相同的渲染操作时，元素很好。

看起来像屏幕外的画布处理它的“边缘”并不像画布一样好（无声地忽略其定义区域之外的绘图命令）。换句话说，屏幕外画布没有似乎反映了我在@context.save() @context.translate(@offset.x,@offset.y) @renderer.draw(world, @offset) @context.restore() 上方或左侧（或者[0,0]下方或右侧）所做的任何绘图。）是否有方法可以适应这种情况？

我尝试过的事情：

• 调整屏幕外画布的宽度和高度（遗憾的是，这似乎对坐标产生了难以预测的影响）

Answer 1

我已经能够通过指示更大的屏幕外画布大小来解决这个问题。坐标问题似乎与Isomer的原点位置有关（你可以通过传递不同的原点来覆盖它）。 ）

小注：根据MDN's article on canvas optimization，您需要确保传递给drawImage的坐标和尺寸不是浮点（即，在它们上面调用Math.floor。）我是没有这个就遇到奇怪的抗锯齿工件。