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.
