HTML5 提供了多种方法来绘制和处理图形。以下是三种主要的方法：
1. 使用 <canvas> 元素
<canvas> 元素提供了一个动态的、脚本可绘制的区域，用于在网页中绘制图形。可以用来绘制图像、图表、动画等。它结合了 JavaScript API，允许对图形进行详细的控制。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Canvas 示例</title>
</head>
<body>
<h1>Canvas 示例</h1>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 绘制矩形
ctx.fillStyle = '#FF0000'; // 设置填充颜色
ctx.fillRect(50, 50, 150, 100); // 绘制矩形
// 绘制圆形
ctx.beginPath(); // 开始新路径
ctx.arc(300, 200, 50, 0, 2 * Math.PI); // 绘制圆形
ctx.stroke(); // 绘制边框
ctx.fillStyle = '#00FF00'; // 设置填充颜色
ctx.fill(); // 填充圆形
// 绘制文本
ctx.font = '30px Arial';
ctx.fillStyle = '#0000FF';
ctx.fillText('Hello Canvas', 200, 50);
</script>
</body>
</html>
2. 使用内联 SVG
SVG（可缩放矢量图形）允许使用 XML 格式创建矢量图形，这些图形可以缩放而不会失真。SVG 图形可以直接嵌入 HTML 文档中。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>SVG 示例</title>
</head>
<body>
<h1>SVG 示例</h1>
<svg width="500" height="400" style="border:1px solid #000000;">
<!-- 绘制矩形 -->
<rect x="50" y="50" width="150" height="100" fill="red" />
<!-- 绘制圆形 -->
<circle cx="300" cy="200" r="50" fill="green" stroke="black" stroke-width="2" />
<!-- 绘制文本 -->
<text x="200" y="50" font-family="Arial" font-size="30" fill="blue">Hello SVG</text>
</svg>
</body>
</html>
3. 使用 CSS3 2D 和 3D 转换
CSS3 提供了 2D 和 3D 转换功能，可以对 HTML 元素进行平移、旋转、缩放和倾斜。这些转换可以用来创建各种图形效果和动画。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>CSS3 转换示例</title>
<style>
.container {
perspective: 1000px; /* 设置视角深度 */
}
.box {
width: 200px;
height: 200px;
background-color: red;
transform: rotateY(45deg); /* 2D 旋转 */
transition: transform 1s; /* 平滑过渡 */
}
.box:hover {
transform: rotateY(45deg) rotateX(30deg); /* 2D 和 3D 旋转 */
}
</style>
</head>
<body>
<h1>CSS3 转换示例</h1>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
总结
<canvas>：适用于动态绘图和复杂的图形操作，使用 JavaScript API 来创建和控制图形。- SVG：适用于创建静态矢量图形，可以直接在 HTML 中嵌入，适合用于图表和图形界面。
- CSS3 转换：适用于对 HTML 元素进行视觉效果和动画处理，利用 CSS 的转换属性进行图形变换。
这些技术使得 Web 开发者能够创建富有表现力和互动性的图形和动画。你可以根据具体需求选择最合适的技术来实现你的设计目标。