绘制矩形

本小节我们将学习矩形的两种绘制。

绘制矩形在 canvas 中是常用的，所以 canvas API 直接提供了封装好的绘制矩形的 rect()，这个接收4个参数 x，y，width，height。

先看整体案例：

<!DOCTYPE html>
<html>
<head>
	< 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.Style="blue";
		ctx.lineWidth=;
		
		ctx.rect(,,,);  //了直接绘制矩形
		
		ctx.();
	</script>
</body>
</html>

运行结果：

我们从案例中可以看到，绘制矩形路径只需要即可，和上节课的绘制案例比较，我们省去了连每点的步骤。这里需要注意 rect 只是帮我们绘制了路径，并不会把路径实际地到画布上，我们依然需要描边才能看到绘制的图形。

canvas API 还提供了直接绘制矩形的 Rect()，这个和 rect 一样，也是接收4个参数。

特别说明：利用 Rect 绘制的矩形独立于其他路径，后续对路径的操作不会影响到 Rect 绘制的矩形。

先看整体案例：

<!DOCTYPE html>
<html>
<head>
	< 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.Style="blue";
		ctx.lineWidth=;
		
		ctx.Rect(,,,);  //了直接绘制并渲染矩形
		
	</script>
</body>
</html>

运行结果：

我们从案例中可以看到，绘制矩形路径只需要即可，和 rect 比较，这里我们没有了。

本小节中我们使用到两个新的，分别是 rect 和 Rect。

rect 作用是绘制起点在 (x, y) 、宽度为 width、高度为 height 的矩形路径，它有四个参数变量 x，y，width，height。

变量说明：

Rect 是使用设定的绘画样式，描绘起点在 (x, y) 、宽度为 w、高度为 h 的矩形的，它直接绘制矩形，而不是路径，它有四个参数变量 x，y，width，height。

变量说明：

本小节我们主要学习了利用 rect 和 Rect 绘制矩形。到目前为止我们已经学习了三种绘制矩形的，矩形在 canvas 中是最常用的一种绘制形状，希望同学们认真学习。我们下一节将会讲解如何去填充路径。

←用线条绘制图形

路径填充→

绘制矩形

您的鼓励是对我最大的支持