Canvas 绘制矩形 - Canvas 基础教程 - 简单教程，简单编程

在上一章节 Canvas 坐标体系我们不仅学习了 Canvas 的坐标体系，还是学习了如何绘制一个矩形

矩形是所有形状的始祖之一，比如

把矩形的宽高设置为一样，就是正方形
把矩形倾斜一点，就是平行四边形

要绘制一个矩形，有两种办法

确定起始坐标 (x1,y1) 和矩形斜角坐标 (x2,y2)，然后确定剩下的坐标，最后用直线连起来
取定起始坐标 (x1,y1) 和长宽 (width,height),然后画出来即可

第一种我们后面学习了如何画线再讲，我们先来学习第二种

渲染上下文 ( ctx ) 提供了 strokeRect() 方法用来绘制一个矩形

strokeRect(x, y, width, height)

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

例如下面的代码在 (50,50) 开始绘制一个 200 x 50 的矩形

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

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

运行结果如下

我们可以重复使用 strokeRect() 方法绘制多个矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-2" width="400" height="300">
</canvas>
</div>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.strokeRect(0,0,200,200);
ctx.strokeRect(0,0,100,100);
ctx.strokeRect(50,50,100,100);
ctx.strokeRect(250,250,100,100);
</script>

运行结果如下

绘图顺序

从上面这张图中可以看出，把图画在画板上遵从的是现实生活中绘画的原则：后来画的会覆盖之前画的

上图看的不明显，等以后我们学了如何使用不同的画笔(颜色)之后你会看的更明白

超出大小

现实生活中绘画的时候肯定不会超出画板的范围，当然，canvas 中也不会，所以上面的范例中最后那个矩形只显示了一点点