JavaScript Canvas 坐标变换与元素旋转指南-js教程-PHP中文网

JavaScript Canvas 坐标变换与元素旋转指南

DDD

发布： 2025-10-13 09:46:26

原创

248人浏览过

javascript canvas 坐标变换与元素旋转指南

本教程详细介绍了如何使用JavaScript的HTML Canvas API实现图形元素的旋转。我们将深入探讨Canvas上下文的保存与恢复、坐标系的平移与旋转等核心变换操作，并通过具体代码示例演示如何围绕元素中心进行旋转，以及如何将这些技术应用于图像和文本，帮助开发者高效地在Canvas上创建动态视觉效果。

理解Canvas变换基础

HTML Canvas是一个强大的绘图API，它允许开发者通过JavaScript在网页上绘制图形。与直接操作DOM元素不同，Canvas上的所有绘制都是基于像素的。要实现元素的旋转、缩放或移动，我们通常需要对Canvas的坐标系进行变换，而不是直接修改元素的属性。

Canvas提供了以下几个核心的变换方法：

ctx.save(): 保存当前Canvas的绘图状态（包括当前的变换矩阵、填充样式、描边样式等）。
ctx.restore(): 恢复到最近一次保存的Canvas状态。这对于隔离不同元素的变换非常重要。
ctx.translate(x, y): 将Canvas的坐标原点移动到(x, y)。所有后续的绘制操作都将相对于这个新的原点进行。
ctx.rotate(angle): 旋转Canvas的坐标系。angle参数以弧度表示。所有后续的绘制操作都将相对于这个旋转后的坐标系进行。
ctx.scale(x, y): 缩放Canvas的坐标系。x和y是水平和垂直方向的缩放因子。

实现单个元素的旋转

要实现一个元素的旋转，关键在于结合save()、translate()、rotate()和restore()。一个常见的需求是让元素围绕其自身中心旋转，而不是Canvas的默认原点(0,0)。

立即学习“Java免费学习笔记（深入）”；

示例代码：旋转一个矩形

以下是一个在Canvas上绘制并旋转一个矩形的完整示例：

Alkaid.art

专门为Phtoshop打造的AIGC绘画插件

153

查看详情

HTML 结构 (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 元素旋转示例</title>
    <style>
        body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; }
        canvas { border: 1px solid #ccc; background-color: #fff; }
    </style>
</head>
<body onload="drawRotatedRectangle()">
    <canvas id="myCanvas" width="400" height="300"></canvas>
    <script>
        function drawRotatedRectangle() {
            const canvas = document.getElementById("myCanvas");
            if (!canvas.getContext) {
                console.error("您的浏览器不支持Canvas！");
                return;
            }
            const ctx = canvas.getContext("2d");

            // 定义矩形的基本属性
            const xCenter = canvas.width / 2; // 矩形中心X坐标
            const yCenter = canvas.height / 2; // 矩形中心Y坐标
            const width = 100; // 矩形宽度
            const height = 60; // 矩形高度
            const rotationAngle = Math.PI / 4; // 旋转角度，45度 (π/4 弧度)

            // 1. 保存当前Canvas状态
            ctx.save();

            // 2. 将Canvas原点平移到矩形的中心
            ctx.translate(xCenter, yCenter);

            // 3. 旋转Canvas坐标系
            ctx.rotate(rotationAngle);

            // 4. 绘制矩形
            // 注意：由于原点已平移到矩形中心，绘制时矩形的左上角应为 (-width/2, -height/2)
            ctx.fillStyle = "red";
            ctx.fillRect(-width / 2, -height / 2, width, height);

            // 5. 恢复到之前保存的Canvas状态
            // 这确保了后续的绘制操作不会受到当前旋转和平移的影响
            ctx.restore();

            // 可以在此处绘制其他不受影响的元素，例如一个未旋转的文本
            ctx.fillStyle = "blue";
            ctx.font = "20px Arial";
            ctx.fillText("未旋转的文本", 10, 30);
        }
    </script>
</body>
</html>

登录后复制

代码解析

获取Canvas上下文: const ctx = canvas.getContext("2d"); 获取2D绘图上下文，这是所有Canvas操作的入口。
ctx.save(): 在进行任何变换之前调用save()，保存Canvas的当前状态。这就像在变换前拍了一张快照，允许我们之后回到这个状态。
ctx.translate(xCenter, yCenter): 将Canvas的坐标原点移动到我们希望旋转的中心点。在这个例子中，我们将原点移到了矩形的中心位置。这样做的目的是，当rotate()方法被调用时，它会围绕当前原点进行旋转，从而使矩形围绕自身中心旋转。
ctx.rotate(rotationAngle): 旋转Canvas的整个坐标系。rotationAngle是弧度值。例如，Math.PI / 4 等于45度。
ctx.fillRect(-width / 2, -height / 2, width, height): 绘制矩形。由于我们已经将坐标原点平移到了矩形的中心，所以矩形的左上角坐标变成了 (-width / 2, -height / 2)。这样，矩形就会以新的原点为中心进行绘制。
ctx.restore(): 在完成元素的绘制和变换后，调用restore()将Canvas状态恢复到save()时的状态。这会撤销所有在save()和restore()之间进行的变换操作，确保后续绘制的其他元素不会受到之前变换的影响。

旋转其他Canvas元素

同样的原理也适用于Canvas上的其他绘制操作，例如图像和文本。只需在translate()和rotate()之后，调用相应的绘制方法即可：

旋转图像: 加载图像后，使用ctx.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height); 来绘制图像。
旋转文本: 使用ctx.fillText(text, 0, 0); 或 ctx.strokeText(text, 0, 0); 来绘制文本。需要注意的是，fillText的坐标 (0,0) 在变换后将是文本的基线中心点。

旋转整个Canvas“屏幕”

如果你的需求是旋转Canvas上绘制的所有内容，使其作为一个整体旋转，那么你可以在每次绘制帧的开始阶段，对整个Canvas应用一次全局变换。

例如，在一个动画循环中：

function animate() {
    requestAnimationFrame(animate); // 持续动画

    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除整个Canvas

    // 假设你有一个全局的旋转角度和旋转中心
    const globalRotationAngle = Date.now() / 1000 * (Math.PI / 10); // 随时间旋转
    const rotationCenterX = canvas.width / 2;
    const rotationCenterY = canvas.height / 2;

    ctx.save(); // 保存初始状态

    // 将原点移到全局旋转中心
    ctx.translate(rotationCenterX, rotationCenterY);
    // 旋转整个Canvas坐标系
    ctx.rotate(globalRotationAngle);
    // 移回原点（因为所有后续绘制都将相对于这个旋转后的中心）
    // 注意：这里的平移是针对旋转后的坐标系，因此实际上是将绘制内容移回其在旋转前的相对位置
    ctx.translate(-rotationCenterX, -rotationCenterY);

    // 在这里绘制所有需要旋转的元素
    // 例如，一个矩形
    ctx.fillStyle = "green";
    ctx.fillRect(50, 50, 80, 40

登录后复制

以上就是JavaScript Canvas 坐标变换与元素旋转指南的详细内容，更多请关注php中文网其它相关文章！