2

我的情况类似于关于在画布之间复制数据的问题，但在我的情况下，我认为我遇到了画布引擎本身的问题，我想了解/指导我可能做错了什么。

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

  @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]（或下方或右侧[width,height]）所做的任何绘图。有没有办法解决这个问题？

我尝试过的事情：

  • 调整屏幕外画布的宽度和高度（不幸的是，这似乎对坐标有难以预测的影响）
4

1 回答 1

0

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

一个小提示：根据MDN 关于画布优化的文章，您需要确保传递给的坐标和尺寸drawImage不是浮点数（即调用Math.floor它们）。没有这个，我遇到了奇怪的抗锯齿伪影。

于 2015-09-29T21:42:35.190 回答