在下面的代码中，如果我在两个地方同时使用fillStyle和rect()(即两个矩形均为绿色)，但第二个fill()覆盖了第一个指定的颜色(即，两个矩形均为绿色)，但按预期方式工作(即，第一个rect为蓝色，第二个为绿色)如果我将第一个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
最佳答案
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是 Canvas 的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()
关于javascript - HTML5 Canvas-fillRect()与rect()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22559603/