fillRect 绘制一个填充的矩形

fillRect(x, y, width, height)
x , y          矩形在那个坐标点开始绘制
width , height 绘制一个多大的矩形
使用 fillRect 绘制的矩形的背景为黑色
<canvas id="canvas-1" width="300" height="300" style="border: 1px solid #333;"></canvas>


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

strokeRect 绘制一个带变宽的矩形

strokeRect(x, y, width, height)
x , y          矩形在那个坐标点开始绘制
width , height 绘制一个多大的矩形
使用 strokeRect 绘制的矩形的变宽默认为黑色
<canvas id="canvas-2" width="300" height="300" style="border: 1px solid #333;"></canvas>


<script>
var canvas = document.getElementById("canvas-2");
var ctx = canvas.getContext('2d');
ctx.strokeRect(70,70,160,160);
</script>

clearRect 清除指定矩形区域

clearRect(x, y, width, height)
x , y          矩形在那个坐标点开始绘制
width , height 绘制一个多大的矩形
使用 clearRect 清除的部分会完全透明化
<canvas id="canvas-3" width="300" height="300" style="border: 1px solid #333;"></canvas>


<script>
var canvas = document.getElementById("canvas-3");
var ctx = canvas.getContext('2d');
ctx.strokeRect(0,0,canvas.width,canvas.height);
</script>

example

从上面这个 deme 中看不出任何效果, 下面把三个方法组合起来使用, 效果如下
<canvas id="canvas-4" width="300" height="300" style="border: 1px solid #333;"></canvas>


<script>
var canvas = document.getElementById("canvas-4");
var ctx = canvas.getContext('2d');
// x=50 y=50 的位置绘制了一个 width=200 height=200 的矩形
ctx.fillRect(50,50,200,200);
//绘制清除矩形
// x=70 y=70 的位置绘制了一个 width=160 height=160 的矩形
ctx.clearRect(70,70,160,160); // 这个时候会有一个透明的矩形在黑色背景矩形中间
// x=90 y=90 的位置绘制了一个 width=120 height=120 的黑色边框的矩形
ctx.strokeRect(90,90,120,120);
</script>