Canvas 填充矩形 fillRect - Canvas 基础教程

前两章节我们使用 strokeRect() 绘画的矩形只是画了一个框，如果我们要给绘画的矩形填充颜色，那么就要用到另一个方法 fillRect()

fillRect() 方法和 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.fillRect(50,50,200,50);
</script>

运行结果如下

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

<!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.fillRect(0,0,200,200);
ctx.fillRect(0,0,100,100);
ctx.fillRect(50,50,100,100);
ctx.fillRect(250,250,100,100);
</script>

运行结果如下

全部粘在一起，黑乎乎的....

填充的矩形没有绘制边框

其实不只是矩形，以后我们学到的任何东西，填充的时候是没有边框的

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

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

运行结果如下

大家可以看到，相同位置的红色矩形竟然把黑色的矩形包围了起来

而红色矩形竟然和旁边的红色矩形等宽等高

所以从某些方面说 strokeRect() 方法指定的宽高是不包括边大小的，等以后我们学习了如何绘制线条，我们会返回来讲这一点