当前位置：首页 > news >正文

【第2章绘制】2.13 坐标变换

news 来源：原创 2025/6/8 10:12:43

文章目录

坐标系的平移、缩放与旋转
- 平移
- 旋转
- 缩放
- 镜像
自定义的坐标变换

坐标系的平移、缩放与旋转

平移

translate() 方法通过在网格上将画布和原点水平移动 x 单位和垂直移动 y 单位，向当前矩阵添加一个平移变换。

在这里插入图片描述

示例-移动矩形

在这里插入图片描述

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");// 移动的正方形
ctx.translate(110, 30);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 80, 80);// 重置当前的变换矩阵为单位矩阵
ctx.setTransform(1, 0, 0, 1, 0, 0);// 未移动的正方形
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, 80, 80);

旋转

rotate(angle) 方法用于在变换矩阵中增加旋转。

angle 顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。旋转中心点一直是 canvas 的原点。如果想改变中心点，你可以通过 translate() 方法移动画布。

示例-围绕中心旋转矩形

在这里插入图片描述

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");// 未旋转的矩形
ctx.fillStyle = "gray";
ctx.fillRect(80, 60, 140, 30);// 矩阵变换
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);// 旋转后的矩形
ctx.fillStyle = "red";
ctx.fillRect(80, 60, 140, 30);

缩放

scale() 方法用于根据水平和垂直方向，为 canvas 单位添加缩放变换。

默认情况下，在 canvas 中一个单位实际上就是一个像素。例如，如果我们将 0.5 作为缩放因子，最终的单位会变成 0.5 像素，并且形状的尺寸会变成原来的一半。相似的方式，我们将 2.0 作为缩放因子，将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。

示例-缩放矩形

在这里插入图片描述

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");// 缩放后的矩形
ctx.scale(9, 3);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 8, 20);// 将当前变换矩阵重置为单位矩阵
ctx.setTransform(1, 0, 0, 1, 0, 0);// 未缩放的矩形
ctx.fillStyle = "gray";
ctx.fillRect(10, 10, 8, 20);

镜像

镜像也叫水平或垂直翻转，你可以使用 scale(-1, 1) 来将上下文水平翻转，使用 scale(1, -1) 来将其垂直翻转。

在这里插入图片描述

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')ctx.font = '32px serif'
ctx.fillText('Hello', 10, 80)
ctx.translate(canvas4.width, 0)
ctx.scale(-1, 1)
ctx.fillText('Hello', 10, 80)