javascript - context - Lienzo HTML5-fillRect() vs rect()

javascript canvas rect

Question

En el siguiente código, el segundo fillStyle anula el color especificado en el primero si uso rect() y luego fill() en ambos lugares (es decir, ambos rects son verdes) pero funciona como se esperaba (es decir, el primer rect es azul y segundo es verde) si cambio el primer rect() a fillRect() . ¿Por que es esto entonces? Pensé que fillRect() era solo rect() y luego fill() , ¿verdad?

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

Probado en Chrome | Fiddle

Answer 1

Como sé, hay 3 funciones "rect" para canvas: fillRect , strokeRect y 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

Hay dos atajos:

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

Por lo tanto, su invocación de fill podría llenar solo su forma creada con rect .

Answer 2

fillRect

.fillRect es un comando "independiente" que dibuja y llena un rectángulo.

Por lo tanto, si emite varios comandos .fillRect con varios comandos .fillStyle, cada nuevo rect se llenará con el estilo de relleno anterior.

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 es parte de los comandos de la ruta del lienzo.

Los comandos de ruta son grupos de dibujos que comienzan con beginPath () y continúan hasta que se emita otro beginPath ().

Dentro de cada grupo, solo gana el último comando de estilo.

Entonces, si emite varios comandos .rect y varios comandos .fillStyle dentro de una ruta, solo se utilizará el último .fillStyle en todos los .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()