在下面的代码中,fillStyle
如果我使用第二个颜色,则第二个颜色将覆盖第一个中指定的颜色rect()
,然后fill()
在两个地方都覆盖(即两个矩形均为绿色),但是如果我更改,则按预期方式工作(即,第一个矩形为蓝色,第二个为绿色)第一个rect()
到fillRect()
。为什么会这样呢?我以为fillRect()
只是rect()
,然后fill()
,对不对?
ctx.translate(canvas.width/2, canvas.height/2);
ctx.fillStyle = "#5A9BDC";
ctx.fillRect(0, 0, rectWidth, rectHeight);
// ctx.rect(0, 0, rectWidth, rectHeight);
// ctx.fill();
ctx.translate(-canvas.width/2, -canvas.height/2);
ctx.fillStyle = "#31B131";
ctx.rect(0, 0, rectWidth, rectHeight);
ctx.fill();
在Chrome中测试过| 小提琴
fillRect
.fillRect是一个“独立”命令,用于绘制和填充矩形。
因此,如果您使用多个.fillStyle命令发出多个.fillRect命令,则每个新的rect都将被前面的fillstyle填充。
ctx.fillStyle="red";
ctx.fillRect(10,10,10,10); // filled with red
ctx.fillStyle="green";
ctx.fillRect(20,20,10,10); // filled with green
ctx.fillStyle="blue";
ctx.fillRect(30,30,10,10); // filled with blue
直肠
.rect是画布的path命令的一部分。
路径命令是一组以beginPath()开始并一直持续到发出另一个beginPath()为止的图形。
在每个组中,只有最后一个样式命令获胜。
因此,如果在路径中发出多个.rect命令和多个.fillStyle命令,则所有.rect都将仅使用最后一个.fillStyle。
ctx.beginPath(); // path commands must begin with beginPath
ctx.fillStyle="red";
ctx.rect(10,10,10,10); // blue
ctx.fillStyle="green";
ctx.rect(20,20,10,10); // blue
ctx.fillStyle="blue"; // this is the last fillStyle, so it "wins"
ctx.rect(30,30,10,10); // blue
// only 1 fillStyle is allowed per beginPath, so the last blue style fills all
ctx.fill()
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句