### JavaScript与Canvas绘制矩形的方法
#### 一、引言
在现代Web开发中，`HTML5 Canvas`作为一项重要的技术，为开发者提供了强大的绘图功能。通过JavaScript与Canvas的结合，开发者可以在网页上实现丰富的视觉效果，如动态图表、游戏界面等。本文将详细介绍如何使用JavaScript与Canvas来绘制矩形。
#### 二、基础知识回顾
在开始之前，我们需要了解一些关于HTML5 Canvas的基础知识：
- **Canvas元素**：`<canvas>` 是HTML5中用于图形渲染的一个标签。
- **获取上下文**：通过 `getElementById()` 获取Canvas元素后，需要调用 `getContext()` 方法来获取一个渲染上下文对象，该对象包含了所有用于绘图的方法和属性。
- **绘制方法**：
- `fillStyle` 和 `strokeStyle`：设置填充色和边框色。
- `fillRect(x, y, width, height)`：用于绘制填充矩形。
- `strokeRect(x, y, width, height)`：用于绘制带有边框的矩形。
- `lineWidth`：设置边框宽度。
#### 三、绘制基本矩形
我们来看一个简单的例子，演示如何使用JavaScript与Canvas绘制一个矩形：
```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>canvas绘制矩形</title>
<script type="text/javascript">
function draw(id) {
var canvas = document.getElementById(id);
if (canvas) {
var context = canvas.getContext("2d");
context.fillStyle = "#DDDDDD";
context.fillRect(0, 0, 400, 400);
context.strokeStyle = "black";
context.fillStyle = "gray";
context.lineWidth = 5;
context.fillRect(0, 0, 200, 300);
context.strokeRect(0, 0, 200, 200);
} else {
return;
}
}
function drawBorder(id) {
var canvas = document.getElementById(id);
if (canvas) {
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.strokeStyle = "black";
context.lineWidth = 5;
context.fillRect(0, 0, 300, 200);
context.strokeRect(0, 0, 300, 200);
} else {
return;
}
}
window.onload = function () {
draw("canvas");
drawBorder("canvas2");
};
</script>
</head>
<body>
<canvas id="canvas" width="400" style="background:red;" height="400"></canvas>
<hr />
<canvas id="canvas2" width="400" height="400"></canvas>
</body>
</html>
```
#### 四、代码解析
1. **定义Canvas**：
- 使用 `<canvas>` 元素定义了两个画布，分别设置了不同的宽度和高度。
- 第一个画布还设置了背景颜色为红色。
2. **函数定义**：
- `draw(id)` 函数负责绘制一个灰色填充、黑色边框的矩形。
- `drawBorder(id)` 函数则绘制一个红色填充、黑色边框的矩形，并且边框更宽（5像素）。
3. **绘制过程**：
- 首先通过 `getElementById()` 获取指定ID的Canvas元素。
- 接着调用 `getContext("2d")` 获取2D渲染上下文。
- 使用 `fillStyle` 和 `strokeStyle` 设置填充色和边框色。
- 调用 `fillRect()` 绘制填充矩形。
- 使用 `strokeRect()` 绘制带边框的矩形。
#### 五、扩展功能
除了基础的矩形绘制之外，还可以通过修改样式参数实现更多的视觉效果，例如改变颜色、边框样式等。此外，还可以利用 `Canvas` 的其他方法实现更加复杂的图形绘制，比如圆形、多边形等。
#### 六、总结
通过上述示例，我们不仅学习了如何使用JavaScript与Canvas绘制矩形的基本方法，还了解了一些常用的样式设置技巧。这对于进一步探索Canvas的高级功能打下了良好的基础。希望本文能帮助大家更好地理解和应用Canvas技术，在Web开发中实现更多创意。
