放“大”眼界，纵横Canvas之缩放世界**

2023-11-09 04:45:53

导语

在Canvas的绘图世界中，缩放操作如同点石成金之术，它能自由伸缩画面，放“大”眼界，纵横寰宇。本文将带你领略Canvas中缩放的奥秘，掌握scale方法的用法，开启一场视觉缩放的奇幻之旅。

scale方法：伸缩坐标系

缩放操作的实现离不开scale方法，它接受两个参数：横轴缩放比例和纵轴缩放比例。通过调整这两个参数，我们可以自由缩放坐标系。

语法格式

scale(x, y);

x：横轴缩放比例
y：纵轴缩放比例

作用

scale方法通过修改当前变换矩阵来缩放坐标系，具体变化如下：

正比例（x > 1, y > 1）：放大坐标系，使得单位长度变大。
负比例（x < 1, y < 1）：缩小坐标系，使得单位长度变小。
正负比例组合：实现不同方向的非均匀缩放。
比例为1：不进行缩放。

实战应用：缩放图像和图形

掌握了scale方法后，我们就能轻松缩放各种图像和图形。

图像缩放

将一张图像放置在画布上，调用scale方法放大或缩小图像。例如：

// 放大图像
context.scale(2, 2);
context.drawImage(image, 0, 0);

// 缩小图像
context.scale(0.5, 0.5);
context.drawImage(image, 0, 0);

图形缩放

缩放方法同样适用于各种图形对象，如圆形、矩形和多边形。我们可以通过改变scale参数来动态调整图形大小。例如：

// 放大圆形
context.scale(2, 2);
context.arc(50, 50, 25, 0, 2 * Math.PI);
context.fill();

// 缩小矩形
context.scale(0.5, 0.5);
context.fillRect(100, 100, 100, 100);

进阶技巧：非均匀缩放和嵌套缩放

除了基本的均匀缩放，Canvas还支持非均匀缩放和嵌套缩放。

非均匀缩放

通过设置不同的横轴和纵轴缩放比例，我们可以实现非均匀缩放，拉伸或压缩图形在不同方向上的尺寸。例如：

// 拉伸图像在水平方向上
context.scale(2, 1);
context.drawImage(image, 0, 0);

// 压缩图像在垂直方向上
context.scale(1, 0.5);
context.drawImage(image, 0, 0);

嵌套缩放

嵌套缩放是指在多个scale方法之间进行多次缩放操作，从而实现复杂的效果。例如：

// 放大图像并同时缩小其右半部分
context.scale(2, 2);
context.save();
context.translate(100, 0);
context.scale(0.5, 1);
context.drawImage(image, 0, 0);
context.restore();