Canvas 缩放坐标系

前言

在 Web 开发中，HTML5 的 <canvas> 元素为动态图形和动画提供了强大的支持。canvas 的核心特性之一就是能够通过变换矩阵来改变其坐标系统，从而实现平移、旋转和缩放等效果。本文将深入探讨如何在 canvas 中处理缩放变换，并通过一系列详细的代码示例来展示如何利用这些功能创建动态且富有表现力的视觉效果。

什么是 Canvas 坐标系？

<canvas> 元素默认的坐标系是以画布左上角为原点 (0, 0)，向右为正 x 轴，向下为正 y 轴。我们可以使用 context.transform() 或 context.scale() 方法来改变这个坐标系，实现缩放效果。

示例一：基础缩放

最简单的缩放是在绘图开始时设置一个缩放因子，这会改变后续所有绘图操作的尺寸。下面的代码展示了如何进行全局缩放。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置缩放比例
ctx.scale(2, 2);

// 绘制一个矩形
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

这段代码将绘制一个比预期大两倍的蓝色矩形。

示例二：局部缩放

有时候我们需要在特定位置缩放某个图形而不影响其他部分。这可以通过保存和恢复上下文状态来实现。

ctx.save();
ctx.translate(150, 150); // 移动坐标原点
ctx.scale(0.5, 0.5);     // 局部缩放
ctx.fillStyle = 'red';
ctx.fillRect(-50, -50, 100<