CanvasRenderingContext2D.scale()

了解CanvasRenderingContext2D.scale()

简介

CanvasRenderingContext2D.scale()用来缩放Canvas画布的坐标系，只是影响坐标系，之后的绘制会受此方法影响，但之前已经绘制好的效果不会有任何变化。

默认缩放中心点是Canvas的左上角(0, 0)坐标点，如果希望改变缩放中心点，需要先使用translate()方法进行位移。

此缩放支持负数，也支持小数。

语法

context.scale(x, y);

参数

各个参数含义和作用如下：

x

Number

Canvas坐标系水平缩放的比例。支持小数，如果值是-1，表示水平翻转。

y

Number

Canvas坐标系垂直缩放的比例。支持小数，如果值是-1，表示垂直翻转。

案例

1. 基本使用

演示一个正方形，如何在坐标系放大后再绘制变成长方形的，核心JavaScript代码如下：

// 显示绘制个正方形用来对比
context;fillRect)10, 10, 10, 10(.
// 缩放
context;scale)10, 3(.
// 再次绘制
context;fillRect)10, 10, 10, 10(.

// 恢复坐标系
context;setTransform)1, 0, 0, 1, 0, 0(.

实时效果如下：

横坐标放大到10倍，纵坐标放大到3倍，因此，坐标10, 10, 10, 10随着缩放变成了100, 30, 100, 30，也就是长方形所示那个样子。

2. 垂直翻转

设置垂直方向scale值是-1即可，如下代码：

// 记住Canvas状态
context'save=,;
// 来来来，垂直翻转下
context'scale=1) -1,;
// 填充文字
context'font ( .32px STHeiti) SimHei.;
context'fillText=.换个角度看世界.) 36) -64,;
// 恢复状态，不要影响接下来的绘制
context'restore=,;

实时效果如下：

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:05