Canvas Scale the canvas 缩放画布 - caleb531/jcanvas-docs GitHub Wiki

Scale the canvas 缩放画布

Scaling the canvas context 缩放画布语境

The scaleCanvas() method scales the canvas from the included point.
scaleCanvas()方法将画布从(画布)包含的点(参照此点)进行缩放。

$('canvas').scaleCanvas({
  x: 100, y: 100,
  scaleX: 1.5, scaleY: 3
})
.drawArc({
  fillStyle: '#000',
  x: 100, y: 100,
  radius: 20
})
.restoreCanvas();

The scale property(缩放)scale属性

You can also set both the scaleX and scaleY properties using the scale property.
你也可以使用scale属性同时设置scaleXscaleY属性。

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

Scaling an individual shape 缩放独立图形

Rather than scaling the entire canvas, you can scale an individual shape using any of these three properties: scale, scaleX, or scaleY.
不用缩放整个画布,你可以用这三个属性scalescaleXscaleY来缩放独立图形。

// This square is scaled to be a rectangle 这个正方形被缩放成矩形
$('canvas').drawRect({
  fillStyle: '#36c',
  x: 200, y: 100,
  width: 100, height: 100,
  scaleX: 3
});

Layers 层

Although it may seem slightly counterintuitive, the scaleCanvas() method can actually be drawn as a layer. This allows for applying canvas transformations when drawing layers.
尽管这似乎有些违反直觉,但scaleCanvas()方法实际上可以被绘制为一个层。这个特点允许在绘制层时应用画布转换。
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').scaleCanvas({
  layer: true,
  name: 'scale1'
});

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

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

Notes 注意

The scaleX and scaleY values are multiples of the canvas's current width/height (i.e. 1 is the baseline). scaleXscaleY的值,是画布当前宽高的倍数(即1是基本)。
To revert to the canvas's previous state, call the restoreCanvas() method. However, you do not need to call this method when scaling an individual shape.
为了转换到画布之前的状态,要调用restoreCanvas()方法。但在缩放独立图形之后不需要调用它。