Canvas 填充矩形 fillRect

前两章节我们使用 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() 方法指定的宽高是不包括边大小的,等以后我们学习了如何绘制线条,我们会返回来讲这一点

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.