绘制矩形
1. 前言
本小节我们将学习矩形的两种绘制方法。
2. 利用 rect 方法绘制矩形
先看整体案例：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px 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=;
ctx.rect(,,,); //调用了直接绘制矩形函数
ctx.stroke();
</script>
</body>
</html>
运行结果：
我们从案例中可以看到，绘制一个矩形路径只需要调用一个函数即可，和上节课的绘制案例比较，我们省去了连每一个点的步骤。这里需要注意 rect 方法只是帮我们绘制了路径，并不会把路径实际地显示到画布上，我们依然需要调用 stroke 描边方法才能看到绘制的图形。
先看整体案例：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px 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=;
ctx.strokeRect(,,,); //调用了直接绘制并渲染矩形函数
</script>
</body>
</html>
运行结果：
4. 方法整理
4.1 rect()方法
变量说明：
strokeRect 是使用设定的绘画样式，描绘一个起点在 (x, y) 、宽度为 w、高度为 h 的矩形的方法，它直接绘制一个矩形，而不是一个路径，它有四个参数变量 x，y，width，height。
变量说明：