水车_ ·绘制矩形
1. 前言
本小节我们将学习矩形的两种绘制方法。
2. 利用 rect 方法绘制矩形
绘制矩形在 canvas 中是常用的方法，所以 canvas API 直接提供了一个封装好的绘制矩形的方法 rect()，这个方法接收4个参数 x，y，width，height。
先看整体案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.strokeStyle="blue";
ctx.lineWidth=8;
ctx.rect(10,10,200,100); //调用了直接绘制矩形函数
ctx.stroke();
</script>
</body>
</html>
运行结果：
我们从案例中可以看到，绘制一个矩形路径只需要调用一个函数即可，和上节课的绘制案例比较，我们省去了连每一个点的步骤。这里需要注意 rect 方法只是帮我们绘制了路径，并不会把路径实际地显示到画布上，我们依然需要调用 stroke 描边方法才能看到绘制的图形。
3. 利用 strokeRect 方法绘制矩形
canvas API 还提供了一个直接绘制矩形的方法 strokeRect()，这个方法调用和 rect 方法一样，也是接收4个参数。
特别说明：利用
strokeRect方法绘制的矩形独立于其他路径，后续对路径的操作不会影响到strokeRect绘制的矩形。
先看整体案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.strokeStyle="blue";
ctx.lineWidth=8;
ctx.strokeRect(10,10,200,100); //调用了直接绘制并渲染矩形函数
</script>
</body>
</html>
运行结果：
我们从案例中可以看到，绘制一个矩形路径只需要调用一个函数即可，和 rect 方法比较，这里我们没有调用 stroke 方法了。
4. 方法整理
本小节中我们使用到两个新的方法，分别是 rect 和 strokeRect。
4.1 rect()方法
rect 方法作用是绘制一个起点在 (x, y) 、宽度为 width、高度为 height 的矩形路径，它有四个参数变量 x，y，width，height。
变量说明：
| 变量名 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| x | Number | 是 | 指定左上角位置的X坐标。 |
| y | Number | 是 | 指定左上角位置的Y坐标。 |
| width | Number | 是 | 矩形的宽度值。 |
| height | Number | 是 | 矩形的高度值。 |
4.2 strokeRect() 方法
strokeRect 是使用设定的绘画样式，描绘一个起点在 (x, y) 、宽度为 w、高度为 h 的矩形的方法，它直接绘制一个矩形，而不是一个路径，它有四个参数变量 x，y，width，height。
变量说明：
| 变量名 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| x | Number | 是 | 指定左上角位置的X坐标。 |
| y | Number | 是 | 指定左上角位置的Y坐标。 |
| width | Number | 是 | 矩形的宽度值。 |
| height | Number | 是 | 矩形的高度值。 |
5. 总结
本小节我们主要学习了利用 rect 和 strokeRect 方法绘制矩形。到目前为止我们已经学习了三种绘制矩形的方法，矩形在 canvas 中是最常用的一种绘制形状，希望同学们认真学习。我们下一节将会讲解如何去填充一个路径。
2024 imooc.com All Rights Reserved |