javascript，var canvas = document.getElementById("myCanvas");，var ctx = canvas.getContext("2d");，ctx.fillStyle = "#FF0000";，ctx.fillRect(20, 20, 150, 100);，``在HTML5中，Canvas是一种强大的绘图工具，它允许开发者通过JavaScript直接在网页上绘制图形，Canvas提供了多种方法来绘制矩形，包括填充矩形、绘制矩形边框以及清除指定的矩形区域，以下是对这三种方法的详细介绍：
1. fillRect(x, y, width, height)
fillRect()方法用于绘制一个填充的矩形，该方法接受四个参数，分别是矩形左上角的x坐标、y坐标、矩形的宽度和高度，以下代码将在画布上绘制一个填充的红色矩形：
ctx.fillStyle = "red"; ctx.fillRect(10, 10, 980, 200);
2. strokeRect(x, y, width, height)
strokeRect()方法用于绘制矩形的边框，与fillRect()方法类似，它也接受四个参数，分别是矩形左上角的x坐标、y坐标、矩形的宽度和高度，以下代码将在画布上绘制一个蓝色边框的矩形：
ctx.strokeStyle = "blue"; ctx.strokeRect(210, 230, 500, 250);
3. clearRect(x, y, width, height)
clearRect()方法用于清除指定的矩形区域，使其变为完全透明，该方法同样接受四个参数，分别是矩形左上角的x坐标、y坐标、矩形的宽度和高度，以下代码将清除画布上的一个矩形区域：
ctx.clearRect(15, 15, 50, 25);
4. 示例代码
以下是一个完整的HTML5 Canvas示例代码，演示了如何使用上述三种方法绘制矩形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Canvas Rectangle Example</title>
<style>
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw a filled rectangle
ctx.fillStyle = 'green';
ctx.fillRect(50, 50, 200, 100);
// Draw a rectangle outline
ctx.strokeStyle = 'blue';
ctx.strokeRect(300, 50, 200, 100);
// Clear a rectangular area
ctx.clearRect(550, 50, 200, 100);
</script>
</body>
</html>
FAQs
问题1：如何在Canvas中绘制一个带有渐变色的矩形？
答：要在Canvas中绘制一个带有渐变色的矩形，可以使用createLinearGradient()或createRadialGradient()方法创建一个渐变对象，然后使用该对象设置fillStyle或strokeStyle属性，并调用fillRect()或strokeRect()方法进行绘制。
问题2：如何清除Canvas上的特定区域？
答：要清除Canvas上的特定区域，可以使用clearRect()方法，该方法接受四个参数，分别是矩形左上角的x坐标、y坐标、矩形的宽度和高度，用于指定要清除的区域。
```html
```
这段HTML代码创建了一个简单的网页，其中包含一个`canvas`元素，在`