以下是一个简单的例子，演示如何使用 Canvas 对象绘制一个矩形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Object Example</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid;"></canvas>
<script>
// 获取 canvas 元素
var canvas = document.getElementById('myCanvas');
// 获取 2D 上下文
var ctx = canvas.getContext('2d');
// 绘制矩形
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 80);
// 绘制文本
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('Hello, Canvas!', 20, 50);
</script>
</body>
</html>
在这个例子中，我们首先通过 getElementById 获取了一个具有特定 id（"myCanvas"）的 <canvas> 元素。接着，我们使用 getContext 方法获取了 2D 上下文对象，通过这个上下文对象可以进行图形的绘制。
然后，我们设置了矩形的颜色，调用 fillRect 方法绘制矩形。最后，我们设置了文本的颜色和字体，调用 fillText 方法绘制文本。
Canvas 对象提供了众多的方法和属性，使得你能够在页面上动态地绘制图形和进行图形处理。这为创建图表、动画和其他富交互性的图形应用提供了强大的功能。
转载请注明出处：http://www.pingtaimeng.com/article/detail/6200/JavaScript 和 HTML DOM