Canvas vs. SVG
The Canvas element can be transformed. As an example, a text is written on the canvas at the coordinates (10, 30).
Canvas元素可以被转换。 作为示例,在坐标(10,30)的画布上写入文本。
1 translate(x,y)
The translate(x,y) method is used to move the Canvas.x indicates how far to move the grid horizontally, and y indicates how far to move the grid vertically.
translate(x,y)方法用于移动Canvas。
x表示水平移动网格有多远,y表示垂直移动网格的距离。
In this example, the canvas is moved 100px to the right, and 150px down.
在此示例中,画布向右移动100像素,向下移动150像素。Result:
2 The rotate() Method
The rotate() method is used to rotate the HTML5 Canvas. The value must be in radians, not degrees.Here is an example that draws the same rectangle before and after rotation is set:
rotate()方法用于旋转HTML5画布。 该值必须是弧度,而不是度数。
这是一个在旋转设置之前和之后绘制相同矩形的示例:
3 The scale() Method
The scale()method scales the current drawing. It takes two parameters:- The number of times by which the image should be scaled in the X-direction.- The number of times by which the image should be scaled in the Y-direction.
scale()方法缩放当前图形。 它需要两个参数:
- 图像应在X方向上缩放的次数。
- 图像应在Y方向上缩放的次数。
This will scale the canvas 1.5 times in the X-direction, and 4 times in Y-direction:
这将在X方向上缩放画布1.5倍,Y方向为4倍: