本教程详细讲解如何利用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事件来初始化绘图：
立即学习“Java免费学习笔记（深入）”；
Canvas 元素旋转示例 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; } 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); }
代码解析
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上下文变换：实现图形旋转与整体视图控制的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529178.html
微信扫一扫 
支付宝扫一扫 
