Canvas 按路径绘制矩形 - Canvas 基础教程

上一章节中我们学习了如何按照路径绘制一个图形，其实还可以按照路径绘制一个矩形

比如下面的代码就绘制了一个以 (50,50) 为起始坐标，宽高为 200 x 80 的绿色边框矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="200">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.strokeStyle = "green"
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50+200,50);
ctx.lineTo(50+200,50+80);
ctx.lineTo(50,50+80);
ctx.closePath();
ctx.stroke();
</script>

运行结果如下

请特别注意我们各个坐标点的计算过程

rect() 方法

因为绘制矩形这么常用，所以 渲染上下文 还特意提供了一个 rect() 方法用于绘制矩形

rect(x, y, width, height)

参数	说明
x	起始点 x 坐标
y	起始点 y 坐标
width	矩形长度
height	矩形高度

rect() 方法和 strokeRect() 方法类似，不同之处在于 rect() 方法要调用 stroke() 方法才会真正的把矩形绘制到画板上

例如下面的代码使用 rect() 方法绘制了一个和上面一模一样的矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="200">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.strokeStyle = "green"
ctx.rect(50,50,200,80);
ctx.stroke();
</script>

运行结果如下