以下是使用 <canvas> 的基本示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000;"></canvas>
<script>
// 获取 canvas 元素
var canvas = document.getElementById("myCanvas");
// 获取绘制上下文
var context = canvas.getContext("2d");
// 绘制矩形
context.fillStyle = "#FF0000";
context.fillRect(10, 10, 50, 50);
// 绘制文本
context.fillStyle = "#000000";
context.font = "20px Arial";
context.fillText("Hello, Canvas!", 80, 40);
</script>
</body>
</html>
在这个例子中：
- <canvas> 元素定义了一个宽度为 300 像素、高度为 150 像素的画布，并设置了一个黑色的边框。
- 通过 JavaScript，获取了 <canvas> 元素的 2D 上下文（getContext("2d")）。
- 使用上下文绘制了一个红色的矩形和黑色的文本。
<canvas> 元素通过 JavaScript 提供的 API（例如 fillRect()、fillText()）使得我们可以在画布上绘制各种形状和文本。
这只是 <canvas> 的简单示例，你可以进一步学习和使用它，探索更多的绘图功能，如绘制路径、动画等。在 MDN Web Docs 等资源中可以找到详细的文档和示例。
转载请注明出处：http://www.zyzy.cn/article/detail/3668/HTML5