canvas缩放和偏移

Canvas是HTML5中用于绘制图形的元素，它可以实现图像的缩放和偏移，这对于动态图形展示和交互非常有用。以下是Canvas缩放和偏移的基本概念和方法：

1. **缩放（Scaling）**:
- `ctx.scale(x, y)`：这个方法用于改变当前绘图上下文的缩放比例。参数x和y分别对应水平和垂直方向的比例。例如，`ctx.scale(2, 2)`会使图形的每个像素在画布上占据两倍的空间。
- 前景和背景缩放：`ctx.translate()`会改变坐标系原点，缩放后需要考虑这个因素，可能需要调整坐标。

2. **偏移（Offsetting）**:
- `ctx.translate(x, y)`：用于在当前坐标的基础上向右（正x轴）和向下（正y轴）移动指定的像素数。这样可以改变绘图起点，实现图形的位置变化。

3. **组合使用**:
在缩放之后进行偏移，先调用`ctx.scale()`，然后`ctx.translate()`，可以实现精确的定位和缩放效果。例如：

   ctx.scale(0.5, 0.5); // 缩小50%
   ctx.translate(50, 50); // 向右下角偏移50像素
   ctx.fillRect(0, 0, 100, 100); // 实际绘制的区域将是原始大小的一半，在新位置开始