style fillrect context color clearrect javascript html5-canvas

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