HTML5 Canvas - fillRect() vs rect()

В приведенном ниже коде второй 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

Ответ 1

FillRect

.fillRect - это отдельная команда, которая рисует и заполняет прямоугольник.

Итак, если вы выдаете несколько команд .fillRect с несколькими командами .fillStyle, каждый новый прямоугольник будет заполнен предыдущим 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 является частью команд пути холста.

Команды пула группы рисунков, начиная с beginPath() и продолжаются до тех пор, пока не выдается другое beginPath().

В каждой группе выигрывает только последняя команда стилизации.

Итак, если вы выставляете несколько некорректных команд и несколько команд .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()

Ответ 2

Как я знаю, есть 3 "прямоугольные" функции для canvas: 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.