Translate Canvas 平移画布

The translateCanvas() method translates the canvas by the given values.
translateCanvas()方法将画布以给定的值平移。

$('canvas').translateCanvas({
  translateX: 200, translateY: 100
})
.drawRect({
  fillStyle: '#000',
  x: 50, y: 50,
  width: 100, height: 50
})
.restoreCanvas();

The translate property（平移）translate属性

You can also set both the translateX and translateY properties using the translate property.
你可以使用translate属性来同时设置translateX和translateY属性。

$('canvas').translateCanvas({
  translate: 100
})
.drawRect({
  fillStyle: '#000',
  x: 100, y: 100,
  width: 100, height: 50
})
.restoreCanvas();

Translating an individual shape 平移独立图形

Rather than translating the entire canvas, you can translate an individual shape using any of these three properties.
不用平移整个画布，你可以使用这三个属性中任意一个来平移独立图形。

$('canvas')
.drawRect({
  fillStyle: '#474',
  x: 50, y: 50,
  width: 100, height: 50,
  translateX: 200, translateY: 100
});

Please note that translating a shape changes its center of transformation (which will affect how the layer is rotated).
请注意，平移图形会改变它的转换（变形）中心（会影响层的旋转）。

Layers 层

Although it may seem slightly counterintuitive, the translateCanvas() method can actually be drawn as a layer. This allows for applying canvas transformations when drawing layers.
尽管这似乎有些违反直觉，但translateCanvas方法实际上可以绘制为一个层。这个特点允许在绘制层时应用画布转换。
To do this, set the layer property to true, just as you would to make any other shape a layer. In addition, just as you can with any other type of layer, you can give this layer a name using the name property.
为了达到这点，要设置layer属性为true，就像你将任意其它图形转化成层一样。再有，就像你对其它类型的层做的那样，你也可以使用name属性给它命名。

$('canvas').translateCanvas({
  layer: true,
  name: 'translate1'
});

However, whenever you're done translating the canvas, you must restore the transformation using the restoreCanvas() method.
但无论何时你平移完画布之后，你必须恢复转换，使用restoreCanvas()方法。

$('canvas').restoreCanvas({
  layer: true
});

Notes 注意

To revert to the canvas's previous state, call the restoreCanvas() method. However, you do not need to call this method when translating an individual shape.
为了转换回画布之前的状态，要调用restoreCanvas()方法。但在平移独立图形之后不需要调用它。