Question

在下面的代码中，第二个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中测试 | Fiddle

Answer 1

<强> 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

.rect是画布路径命令的一部分。

路径命令是图纸组，以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()

Answer 2

据我所知，画布有3个“rect”函数：fillRect，strokeRect和rect。

ctx.rect(0,0,rectWidth,rectHeight); // create some shape, there is nothing on the canvas yet
ctx.stroke(); // draw stroke of the shape
ctx.fill();   // fill the shape

有两个快捷方式：

ctx.strokeRect(0,0,rectWidth,rectHeight); // shortcut to stroke rectangle
ctx.fillRect(0, 0, rectWidth, rectHeight); // shortcut to fill rectangle

因此，您的fill调用只能填充使用rect创建的形状。

Answer 3

如果您想为不同的路径命令使用不同的颜色，请在每个命令起作用之前调用beginPath()。

ctx.beginPath();  
ctx.fillStyle="red";
ctx.rect(10,10,10,10);
ctx.fill()

ctx.beginPath()
ctx.fillStyle="green";
ctx.rect(20,20,10,10);  
ctx.fill()

ctx.beginPath()
ctx.fillStyle="blue";  
ctx.rect(30,30,10,10);  
ctx.fill()

HTML5 Canvas - fillRect（）vs rect（）

3 个答案: