以下是一个简单的 <canvas> 的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Tag Example</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
// 获取 canvas 元素
var canvas = document.getElementById("myCanvas");
// 获取 2D 渲染上下文
var ctx = canvas.getContext("2d");
// 在 canvas 上绘制一个矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
在这个例子中，<canvas> 元素创建了一个宽度为 200 像素，高度为 100 像素的画布，并通过 JavaScript 获取了 2D 渲染上下文。然后，通过调用 fillRect 方法，在画布上绘制了一个红色矩形。
<canvas> 元素的属性和方法提供了丰富的绘图功能，可以用于创建图表、动画、游戏等。通过在 JavaScript 中使用 canvas API，你可以动态地绘制、更新和交互。这使得 <canvas> 成为创建丰富交互性内容的有力工具。
转载请注明出处：http://www.zyzy.cn/article/detail/3709/HTML5