JavaScript Canvas 2D上下文变换：实现图形旋转与整体视图控制-js教程-PHP中文网

JavaScript Canvas 2D上下文变换：实现图形旋转与整体视图控制

聖光之護

发布： 2025-10-13 12:36:02

原创

1060人浏览过

JavaScript Canvas 2D上下文变换：实现图形旋转与整体视图控制

本教程详细讲解如何利用javascript canvas 2d上下文的变换功能，如translate、rotate、save和restore，实现页面元素的旋转与整体视图的灵活控制。通过改变绘图坐标系，开发者可以轻松地旋转图像、文本等内容，模拟“屏幕”旋转效果，为交互式web应用提供强大的视觉表现力。

1. 理解Canvas 2D上下文变换

当我们在HTML canvas元素上绘图时，实际上是在操作其2D渲染上下文（CanvasRenderingContext2D）。这个上下文维护着一个当前的变换矩阵，它决定了所有后续绘图操作的坐标系。通过修改这个矩阵，我们可以实现平移（translate）、旋转（rotate）、缩放（scale）等效果，而无需手动计算每个元素的最终坐标。这对于实现复杂的图形布局和动画效果至关重要，尤其是在需要模拟整个“屏幕”或特定区域旋转的场景下。

2. 核心变换方法

Canvas 2D上下文提供了一系列方法来操作其变换矩阵：

ctx.save(): 保存当前上下文的状态，包括当前的变换矩阵、填充样式、描边样式等所有绘图属性。这在执行一系列临时变换之前非常有用，以便之后可以恢复到之前的状态。
ctx.translate(x, y): 将当前坐标系的原点移动到(x, y)。这意味着所有后续的绘图操作都将相对于这个新原点进行。例如，ctx.fillRect(0, 0, w, h) 在 translate(x, y) 之后，实际上会在屏幕的 (x, y) 位置绘制矩形。
ctx.rotate(angle): 旋转当前坐标系。angle参数以弧度表示。正值表示顺时针旋转，负值表示逆时针旋转。旋转是围绕当前坐标系的原点进行的。
ctx.restore(): 恢复到最近一次 ctx.save() 所保存的上下文状态。这会撤销所有在 save() 和 restore() 之间进行的变换和属性更改。

3. 实践：旋转画布上的元素

下面是一个具体的示例，展示如何在一个Canvas上绘制一个旋转的矩形。我们将利用 translate 将矩形移动到指定位置，然后利用 rotate 使其围绕自身中心旋转。

HTML结构

首先，在HTML中创建一个canvas元素，并设置onload事件来初始化绘图：

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

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

<!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="initCanvas()">
    <canvas id="myCanvas" width="600" height="400"></canvas>
    <script>
        function initCanvas() {
            const canvas = document.getElementById("myCanvas");
            const ctx = canvas.getContext("2d");

            const xCenter = 300; // 矩形中心X坐标
            const yCenter = 200; // 矩形中心Y坐标
            const height = 60;   // 矩形高度
            const width = 100;   // 矩形宽度
            const rotationAngle = 45 * Math.PI / 180; // 旋转角度，转换为弧度 (45度)

            // 绘制第一个未旋转的矩形作为参考
            ctx.fillStyle = "blue";
            ctx.fillRect(xCenter - width / 2, yCenter - height / 2, width, height);
            ctx.font = "16px Arial";
            ctx.fillStyle = "black";
            ctx.textAlign = "center";
            ctx.fillText("未旋转", xCenter, yCenter + height / 2 + 20);

            // 保存当前上下文状态
            ctx.save();

            // 将坐标原点移动到矩形的中心
            ctx.translate(xCenter, yCenter);

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

            // 设置填充颜色
            ctx.fillStyle = "red";

            // 在新的坐标系中绘制矩形。
            // 由于原点已移动到矩形中心，所以矩形的左上角应为 (-width/2, -height/2)
            ctx.fillRect(width / -2, height / -2, width, height);
            ctx.fillText("已旋转", 0, height / 2 + 20); // 在旋转后的坐标系原点绘制文本

            // 恢复到之前保存的上下文状态，撤销translate和rotate
            ctx.restore();

            // 恢复后，可以继续在原始坐标系中绘制其他内容
            ctx.fillStyle = "green";
            ctx.fillRect(50, 50, 80, 40);
            ctx.fillText("原始坐标系", 90, 110);
        }
    </script>
</body>
</html>

登录后复制

代码解析

canvas.getContext("2d"): 获取2D渲染上下文对象。
ctx.save(): 在进行任何变换之前，保存当前的绘图状态。这允许我们在完成特定元素的绘制后，轻松地恢复到原始状态，避免影响后续的绘图。
ctx.translate(xCenter, yCenter): 将画布的绘图原点移动到我们希望矩形中心所在的 (xCenter, yCenter) 位置。
ctx.rotate(rotationAngle): 围绕当前原点（即 (xCenter, yCenter)）旋转坐标系。rotationAngle 需要是弧度值，通常将角度乘以 Math.PI / 180 进行转换。
ctx.fillRect(width / -2, height / -2, width, height): 在旋转和平移后的新坐标系中绘制矩形。由于原点现在位于矩形的中心，所以矩形的左上角坐标需要设置为 (-width/2, -height/2)，这样矩形才能以其中心为轴进行旋转。
ctx.restore(): 恢复到 ctx.save() 时的状态。这会撤销 translate 和 rotate 操作，使后续的绘图回到原始的坐标系。

4. 整体视图旋转与注意事项

如果目标是旋转“整个屏幕”或Canvas上的所有内容，而不仅仅是单个元素，那么可以在绘制所有内容之前，对整个Canvas的上下文应用一次 translate 和 rotate。

function rotateWholeCanvasContent() {
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布

    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const rotationAngle = 15 * Math.PI / 180; // 旋转15度

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

    // 将原点移动到画布中心，以便围绕中心旋转
    ctx.translate(centerX, centerY);
    // 旋转整个坐标系
    ctx.rotate(rotationAngle);
    // 将原点移回左上角，但现在是旋转后的左上角
    ctx.translate(-centerX, -centerY);

    // 在这个旋转后的坐标系中绘制所有内容
    // 绘制一个图片
    const img = new Image();
    img.src = 'https://via.placeholder.com/100x75/0000FF/FFFFFF?text=Image'; // 示例图片路径
    img.onload = () => {
        ctx.drawImage(img, 50, 50, 100, 75); // 绘制图片
        ctx.fillStyle = "purple";
        ctx.font = "24px Arial";
        ctx.fillText("

登录后复制

以上就是JavaScript Canvas 2D上下文变换：实现图形旋转与整体视图控制的详细内容，更多请关注php中文网其它相关文章！