javascript - context - Lienzo HTML5-fillRect() vs rect()
javascript canvas rect (2)
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
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
.
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()