javascript - HTML5 Canvas - fillRect() 与 rect()

Question

在下面的代码中，如果我使用 rect() 然后使用 fill()，第二个 fillStyle 会覆盖第一个中指定的颜色在这两个地方(即，两个矩形都是绿色)，但如果我将第一个 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 中测试 | Fiddle

Answer 1

填充矩形

.fillRect 是一个“独立”命令，用于绘制和填充矩形。

因此，如果您使用多个 .fillStyle 命令发出多个 .fillRect 命令，则每个新矩形都将使用前面的 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 是 Canvas 路径命令的一部分。

路径命令是绘图组，从 beginPath() 开始，一直持续到发出另一个 beginPath() 为止。

在每个组中，只有最后一个样式命令获胜。

因此，如果您在路径内发出多个 .rect 命令和多个 .fillStyle 命令，则只有最后一个 .fillStyle 将用于所有 .rect。

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()