阅读量:0
HTML5 Canvas实现平移/放缩/旋转demo示例，包括代码及截图。Canvas Transformation Demo
简介
HTML5 Canvas 提供了一种强大的方式，通过 JavaScript 来动态生成图形，本文将介绍如何使用 HTML5 Canvas 来实现平移、放缩和旋转的示例，我们将一步步展示如何编写代码并附上截图，以便更好地理解每个步骤。
创建基本的 HTML 结构
我们需要创建一个基本的 HTML 页面，并在其中包含一个<canvas> 元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>Canvas Transformations Example</title> </head> <body> <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000;"></canvas> <script src="script.js"></script> </body> </html>
绘制基本图形
在script.js 文件中，我们获取 canvas 的上下文，并绘制一个简单的矩形。
const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'blue'; ctx.fillRect(50, 50, 100, 100);实现平移（Translation）
平移是将图形沿着 x 或 y 轴移动的操作，我们可以通过context.translate() 方法来实现。
ctx.save(); // 保存当前状态 ctx.translate(150, 0); // 向右平移 150 像素 ctx.fillStyle = 'green'; ctx.fillRect(50, 50, 100, 100); ctx.restore(); // 恢复之前保存的状态
实现放缩（Scaling）
放缩是改变图形的大小，我们可以通过context.scale() 方法来实现。
ctx.save(); // 保存当前状态 ctx.scale(1.5, 1); // 水平方向放大 1.5 倍，垂直方向不变 ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100); ctx.restore(); // 恢复之前保存的状态
实现旋转（Rotation）
旋转是围绕某个点旋转图形，我们可以通过context.rotate() 方法来实现。
ctx.save(); // 保存当前状态 ctx.translate(200, 200); // 将旋转中心移到 (200, 200) ctx.rotate(Math.PI / 4); // 旋转 45 度 ctx.fillStyle = 'purple'; ctx.fillRect(50, 50, 100, 100); ctx.restore(); // 恢复之前保存的状态
综合应用
我们可以将这些变换组合起来，以实现更复杂的效果。
ctx.save(); ctx.translate(200, 100); // 平移 ctx.scale(1.5, 1); // 放缩 ctx.rotate(Math.PI / 4); // 旋转 ctx.fillStyle = 'orange'; ctx.fillRect(50, 50, 100, 100); ctx.restore();
FAQs
Q1: 为什么在使用context.transform() 方法后需要调用context.restore()？
A1:context.transform() 方法会修改当前的绘图状态，包括坐标系和平移、放缩、旋转等变换，如果不恢复原始状态，后续的绘图操作都会受到这些变换的影响，使用context.restore() 可以恢复到变换之前的状态，确保后续绘图不受影响。
Q2: 如何重置整个 canvas？
A2: 要重置整个 canvas，可以使用context.setTransform() 方法将变换矩阵重置为单位矩阵，然后调用context.clearRect() 方法清除画布内容。
ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置变换矩阵 ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布内容
通过以上步骤，我们已经实现了 HTML5 Canvas 的平移、放缩和旋转功能，并了解了如何综合应用这些变换以及常见问题的解决方法，希望这篇文章对你有所帮助！
# HTML5 Canvas 实现平移、放缩、旋转 Demo 示例
## 简介
HTML5 Canvas 提供了一个二维的绘图环境，可以用来绘制图形、文本以及进行动画处理，通过改变画布上的矩阵，我们可以实现图形的平移、放缩和旋转，以下是一个简单的示例，展示如何使用 HTML5 Canvas 实现这些操作。
## 示例代码
```html
```
## 使用说明
1. 将上述代码保存为 `.html` 文件。
2. 打开该文件，你会看到一个画布，其中有一个蓝色的矩形。
3. 使用鼠标移动可以平移矩形。
4. 使用鼠标滚轮可以缩放矩形。
5. 使用键盘的上下箭头可以旋转矩形。
## 截图
由于文本格式限制，无法直接提供截图，但你可以按照上述步骤尝试运行代码，并自行观察效果。
## 注意事项
变换矩阵中的最后一个元素（1）是用于保持齐次的。
在实际应用中，你可能需要更复杂的变换矩阵来处理更复杂的图形和场景。
在移动设备上，可能需要调整事件处理程序以适应触摸事件。
