HTML5 不仅引入了许多新的语义化标签和表单增强，还提供了用于绘制图形和动画的功能，其中包括 Canvas 和 SVG。在这篇文章中，我们将探讨 HTML5 中的 Canvas 和 SVG，以及它们在网页设计中的应用。

Canvas

Canvas 是 HTML5 提供的一个用于绘制图形的元素，通过 JavaScript 脚本可以在 Canvas 上绘制各种图形、动画和交互式内容。

Canvas 的特点：

  • 提供了一个像素级别的绘图区域。

  • 可以绘制图形、文本、图像等。

  • 支持动画和交互效果。

  • 需要使用 JavaScript 脚本来操作和绘制内容。

以下是一个简单的 Canvas 示例：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        
        ctx.fillStyle = 'blue';
        ctx.fillRect(10, 10, 50, 50);
    </script>
</body>
</html>

SVG

SVG（可缩放矢量图形）是一种基于 XML 的图形格式，用于描述二维矢量图形，可以在网页上进行缩放而不失真。

SVG 的特点：

  • 使用 XML 格式描述图形。

  • 支持路径、形状、文本等元素。

  • 可以通过 CSS 和 JavaScript 进行样式和交互控制。

  • 支持动画效果。

以下是一个简单的 SVG 示例：

<!DOCTYPE html>
<html>
<head>
    <title>SVG 示例</title>
</head>
<body>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="red" />
    </svg>
</body>
</html>

通过 Canvas 和 SVG，你可以在网页上实现丰富多彩的图形和动画效果，为用户提供更加吸引人的视觉体验。继续探索 HTML5 的新特性，发挥你的创造力，打造独具特色的网页吧！

希望这篇文章对你有所帮助！如果有任何问题或需要进一步解释，请随时告诉我。