绘制HTML5画布的特定区域

Question

如果我的很多绘图都在我的大画布的特定区域内（在这种情况下，在中心），有没有办法说你在那个特定的'子画布中工作'而不是每次想要绘制时都要添加/减去边距？每次我指定坐标时，它只会使我的代码看起来更复杂。

Answer 1

您可以使用translate()更改坐标的来源。

首先，使用save()保存原始来源。然后，找到适合屏幕绘图区域中心的原点并调用translate(x, y)。做你的绘图，然后使用restore()来恢复以前的原点。

jsFiddle

Answer 2

您可以使用drawimage将屏幕外画布绘制到另一个画布的某个部分。

创建一个新的画布对象并将所有内容绘制到该对象中。最后将画布绘制到您的屏幕画布上，并在某些坐标处使用drawimage。

Answer 3

Kinetic.js，Canvas的热门库允许您创建Group图层。您可以指定此x的{​​{1}}，y坐标，高度和宽度。您还可以在此组中添加形状并绘制其他内容。

以下是示例：

Group

Here's a tutorial on how to add Groups