HTML5画布：画矩形
本帖最后由 马黑黑 于 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);
<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>
本帖最后由 马黑黑 于 2022-2-28 22:07 编辑 <br /><br /><canvas id="canva"></canvas>
<script>
var canva = document.getElementById('canva');
var cT = canva.getContext('2d');
cT.strokeStyle = "blue";
cT.fillStyle = "tomato";
cT.lineWidth = 6;
cT.strokeRect(10,10,200,100);
cT.fillRect(10,10,200,100);
</script>
<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>
上一楼的代码：
<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> 是不是可以理解canvas.rect是画矩形线框，而ctx.fillRect是画矩形面块。 痛呀大小的块“不会覆盖掉蓝色的边框，”是因为有cvT.lineWidth = 6;这句吧，剩下的边应该是3是宽度。 红影 发表于 2022-2-28 23:06
痛呀大小的块“不会覆盖掉蓝色的边框，”是因为有cvT.lineWidth = 6;这句吧，剩下的边应该是3是宽度。
嗯，一半留着 红影 发表于 2022-2-28 23:04
是不是可以理解canvas.rect是画矩形线框，而ctx.fillRect是画矩形面块。
可以这样理解吧 马黑黑 发表于 2022-3-1 09:12
嗯，一半留着
要是没有那个宽度，估计就盖掉了。 马黑黑 发表于 2022-3-1 09:13
可以这样理解吧
这个画矩形css也能做的。 红影 发表于 2022-3-1 12:27
这个画矩形css也能做的。
当然。但画布是个不同的渲染场景 红影 发表于 2022-3-1 12:26
要是没有那个宽度，估计就盖掉了。
好像也保留一个像素 马黑黑 发表于 2022-3-1 13:15
当然。但画布是个不同的渲染场景
嗯，是不同的展现方式。 马黑黑 发表于 2022-3-1 13:15
好像也保留一个像素
这样好，至少误操作时知道地下还有东西。 红影 发表于 2022-3-1 20:39
这样好，至少误操作时知道地下还有东西。
将来，画布还会进化，也许更好操作 红影 发表于 2022-3-1 20:38
嗯，是不同的展现方式。
总的来说，画布将来会很厉害 马黑黑 发表于 2022-3-1 20:59
将来，画布还会进化，也许更好操作
非常好的理念。 马黑黑 发表于 2022-3-1 21:00
总的来说，画布将来会很厉害
所以现在学起来是很必要的。 红影 发表于 2022-3-1 23:27
所以现在学起来是很必要的。
看需要吧