HTML5画布：画矩形

马黑黑 · 发表于 2022-2-28 22:03

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-2-28 22:43 编辑

相对而言，在canvas画布上画矩形是简单的，其语法是 rect()，具体写法如下：

canvas.rect(x,y,width,height);

共四个参数，x、y是xy坐标值，也就是矩形的左上角起始值，width是矩形宽度、height是矩形高度。下面举例说明：

<canvas id="canv"></canvas>

<script>

var canv = document.getElementById('canv');
var cvT = canv.getContext('2d');
cvT.strokeStyle = "blue";
cvT.lineWidth = 6;
cvT.rect(10,10,200,100);
cvT.stroke();

</script>

JS代码中，我们同样要获得canvas的id标识，然后为之定义2d画笔，随后设置画笔颜色、设定线条粗细，接着在XY坐标值（10,10）处起笔画一个 200*100 的矩形，最后用 stroke() 方法将矩形画出来。

本例中，我们未定义canvas画布的尺寸，是使用了canvas画布的默认值 300*150 的宽高。

画矩形还可以使用 strokeRect() 方法，此法其实是 stroke + rect() 的组合。看例子：

var canv = document.getElementById('canv');
var cvT = canv.getContext('2d');
cvT.strokeStyle = "blue";
cvT.lineWidth = 6;
cvT.strokeRect(10,10,200,100);

这样的画法效果和前面的例子完全一致。

矩形还可以加填充色。填充色用 fillStyle 设定颜色。比如给上面的矩形上背景色，先定义填充色：

cvT.fillStyle = "red";

然后用 fillRect() 方法着色：

cvT.fillRect(10,10,200,100);

这将不会覆盖掉蓝色的边框。

实际上，如果不需要边框，我们可以直接使用如下两句画出只有填充色的矩形：

cvT.fillStyle = "red";
cvT.fillRect(10,10,200,100);

马黑黑 · 发表于 2022-2-28 22:04

马黑黑 · 发表于 2022-2-28 22:06

本帖最后由马黑黑于 2022-2-28 22:07 编辑

马黑黑 · 发表于 2022-2-28 22:08

马黑黑 · 发表于 2022-2-28 22:09

上一楼的代码：

<canvas id="cv"></canvas>

<script>

var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');
ctx.fillStyle = "tomato";
ctx.fillRect(10,10,200,100);

</script>