章节索引 :

绘制矩形

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. 方法整理

本小节中我们使用到两个新的方法,分别是 rectstrokeRect

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. 总结

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