在Canvas中，矩形分为“描边”矩形和“填充”矩形两种。
“描边”矩形
在Canvas中，我们使用strokeStyle属性和strokeRect()方法配合使用来绘制一个“描边”矩形。
语法：
ctx.strokeStyle = 属性值;
ctx.strokeRect(x, y, width, height);
（1）strokeStyle属性
strokeStyle属性的值有三种：颜色值、渐变色、图案。取值为颜色值时有如下4种情况：
// 十六进制颜色值
ctx.strokeStyle = '#FF0000';
// 颜色关键字
ctx.strokeStyle = 'red';
// rgb颜色值
ctx.strokeStyle = 'rgb(255, 0, 0)';
// rgba颜色值
ctx.strokeStyle = 'rgba(255, 0, 0, 0.6)';
（2）strokeRect()方法
strokeRect()方法用于确定矩形的坐标、宽度、高度。默认情况下宽度和高度都是以像素为单位。
strokeStyle属性必须在strokeRect()方法之前设置，否则无效。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>绘制直线</title>
</head>
<body>
<canvas id="canvas" width="200" height="150"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
ctx.strokeStyle = 'red';
ctx.strokeRect(50, 50, 80, 60);
};
</script>
</body>
</html>
效果图：
“填充”矩形
在Canvas中，我们使用fillStyle属性和fillRect()方法配合使用来绘制一个“描边”矩形。
语法：
ctx.fillStyle = 属性值;
ctx.fillRect(x, y, width, height);
（1）fillStyle属性
fillStyle属性的值同strokeStyle属性的值一样，取值也有三种：颜色值、渐变色、图案。
（2）fillRect()方法
fillRect()方法用于确定矩形的坐标、宽度、高度。默认情况下宽度和高度都是以像素为单位。
fillStyle属性必须在fillRect()方法之前设置，否则无效。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>绘制直线</title>
</head>
<body>
<canvas id="canvas" width="200" height="150"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 80, 60);
};
</script>
</body>
</html>
效果图：
rect()方法
在Canvas中，绘制矩形除了使用strokeRect()和fillRect()方法外，还可以使用rect()方法。
语法：
rect(x, y, width, height);
strokeRect()、fillRect()和rect()这3个方法都能绘制矩形，rect()方法与strokeRect()和fillRect()方法不同之处在于，strokeRect()和fillRect()这两个方法在调用之后会立即绘制矩形，而rect()方法在调用后并不会立即绘制矩形，只有在使用rect()方法后再调用stroke()方法或者fill()方法，才会真正地绘制矩形。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>rect()方法</title>
</head>
<body>
<canvas id="canvas" width="200" height="150"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
ctx.strokeStyle = 'red';
ctx.rect(50, 50, 80, 60);
ctx.stroke();
ctx.fillStyle = '#FFE8E8';
ctx.rect(50, 50, 80, 60);
ctx.fill();
};
</script>
</body>
</html>
效果图：
clearRect()方法
在Canvas中，我们使用clearRect()方法清空指定矩形区域。
语法：
ctx.clearRect(x, y, width, height);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>clearRect()方法</title>
</head>
<body>
<canvas id="canvas" width="200" height="150"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
ctx.fillStyle = '#FF0000';
ctx.fillRect(50, 50, 80, 60);
ctx.clearRect(60, 60, 50, 40);
};
</script>
</body>
</html>
效果图：
实例：绘制方格调色板
分析：使用两层for循环绘制方格阵列，每个方格使用不同的颜色。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>绘制方格调色板</title>
</head>
<body>
<canvas id="canvas" width="200" height="150"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
Math.floor(255 - 42.5 * j) + ', 0)';
ctx.fillRect(j * 25, i * 25, 25, 25);
}
}
};
</script>
</body>
</html>
效果图：
