Resumo : neste tutorial, você aprenderá como usar o fillRect()
método JavaScript para desenhar retângulos com largura e altura especificadas em uma tela.
Introdução ao método JavaScript fillRect()
Este fillRect()
é um método do objeto de contexto de desenho 2D. O fillRect()
método permite que você desenhe um retângulo preenchido na (x,y)
posição com altura e largura especificadas em uma tela .
O seguinte mostra a sintaxe do fillRect()
método:
ctx.fillRect(x,y,width,height);
Linguagem de código: CSS ( css )
Nesta sintaxe:
x
é a coordenada do eixo x do ponto inicial do retângulo.y
é a coordenada do eixo y do ponto inicial do retângulo.width
é a largura dos retângulos. Pode ser positivo ou negativo. Os valores positivos estão à direita enquanto os valores negativos estão à esquerda.height
é a altura do retângulo. Também pode ser positivo ou negativo. Os valores positivos diminuíram enquanto os valores negativos aumentaram.
O fillStyle
atributo do contexto do desenho 2D determinará o estilo de preenchimento do retângulo.
Exemplo de JavaScript fillRect()
O seguinte mostra o index.html
arquivo que possui um elemento canvas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Canvas fillRect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>JavaScript Canvas fillRect</h1>
<canvas id="canvas" height="400" width="500">
</canvas>
<script src="js/index.js"></script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
A seguinte drawRectangles()
função no app.js
arquivo desenhará dois retângulos:
function drawRectangles() {
const canvas = document.querySelector('#canvas');
if (!canvas.getContext) {
return;
}
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#F9DC5C';
ctx.fillRect(100, 100, 150, 100);
ctx.fillStyle = 'rgba(0,0,255,0.5)';
ctx.fillRect(200, 150, -150, -100);
}
drawRectangles();
Linguagem de código: JavaScript ( javascript )
Como funciona.
Primeiro, selecione o elemento canvas usando o document.querySelector()
método:
const canvas = document.querySelector('#canvas');
Linguagem de código: JavaScript ( javascript )
Segundo, verifique se o navegador suporta a API canvas:
if (!canvas.getContext) {
return;
}
Linguagem de código: JavaScript ( javascript )
Terceiro, obtenha o objeto de contexto de desenho 2D:
const ctx = canvas.getContext('2d');
Linguagem de código: JavaScript ( javascript )
Quarto, defina o estilo de preenchimento para a #F9DC5C
cor e desenhe o primeiro retângulo usando o fillRect()
método:
ctx.fillStyle = '#F9DC5C';
ctx.fillRect(100, 100, 150, 100);
Linguagem de código: JavaScript ( javascript )
O primeiro retângulo começa em (100,100)
e tem a largura de 150
pixels e a height
largura de 100
pixels.
Por fim, defina o estilo de preenchimento como azul com alfa 0,5, o que cria um efeito transparente. E use o fillRect()
método para desenhar o segundo retângulo:
ctx.fillStyle = 'rgba(0,0,255,0.5)';
ctx.fillRect(200, 150, -150, -100);
Linguagem de código: JavaScript ( javascript )
O segundo retângulo começa em (200,150)
. Como passamos a largura e a altura negativas para o fillRect()
método, a largura fica para a esquerda e a altura para cima.
A imagem a seguir mostra a saída:
Aqui está o link para a demonstração .
Usando JavaScript fillRect() para desenhar uma parede de tijolos
Neste exemplo, você aprenderá como usar o fillRect()
método para desenhar uma parede de tijolos.
O seguinte ilustra o index.html
arquivo que possui um elemento canvas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Canvas fillRect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>JavaScript fillRect() - Draw a Brick Wall</h1>
<canvas id="canvas" height="400" width="500">
</canvas>
<script src="js/app.js"></script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Neste exemplo, a tela terá o seguinte estilo especificado no style.css
arquivo:
canvas {
border: solid 1px #ccc;
background-color: #000;
}
Linguagem de código: CSS ( css )
No app.js
arquivo, defina uma função chamada drawWall() que desenha uma parede de tijolos em uma tela:
function drawWall(ctx, canvasWidth, canvasHeight) {
// define brick height and width, and spaces between them
const bh = 20,
bw = 50,
space = 5;
// calculate the rows and columns of the wall
const rows = Math.ceil(canvasHeight / (bh + space));
const columns = Math.ceil(canvasWidth / (bw + space));
// draw columns
for (let r = 0; r < rows; r++) {
// draw rows
for (let c = 0; c < columns; c++) {
if (r % 2) {
c == 0 ? ctx.fillRect(c * (bw + space), r * (bh + space), bw / 2, bh) :
ctx.fillRect(c * (bw + space) - bw / 2, r * (bh + space), bw, bh);
} else {
ctx.fillRect(c * (bw + space), r * (bh + space), bw, bh);
}
}
}
}
Linguagem de código: JavaScript ( javascript )
A drawWall()
função aceita um contexto de desenho 2D e a altura e largura da parede.
Primeiro, defina a altura (bh) e a largura (bw) de cada tijolo e o espaço entre dois tijolos:
const bh = 20,
bw = 50,
space = 5;
Linguagem de código: JavaScript ( javascript )
Segundo, calcule o número de linhas e colunas de tijolos com base na dimensão do tijolo e na largura e altura da parede:
// calculate the rows and columns of the wall
const rows = Math.ceil(height / (bh + space));
const columns = Math.ceil(width / (bw + space));
Linguagem de código: JavaScript ( javascript )
Terceiro, desenhe tijolos usando o fillRect()
método. Use dois loops for para desenhar tijolos linha por linha.
// draw rows
for (let r = 0; r < rows; r++) {
// draw columns
for (let c = 0; c < columns; c++) {
if (r % 2) {
c == 0 ? ctx.fillRect(c * (bw + space), r * (bh + space), bw / 2, bh) :
ctx.fillRect(c * (bw + space) - bw / 2, r * (bh + space), bw, bh);
} else {
ctx.fillRect(c * (bw + space), r * (bh + space), bw, bh);
}
}
}
Linguagem de código: JavaScript ( javascript )
Observe que o primeiro tijolo da linha par terá uma largura igual à metade da largura do tijolo normal.
A imagem a seguir mostra a saída:
E aqui está o link que mostra a demonstração.
Resumo
- Use o JavaScript
fillRect()
para desenhar um retângulo preenchido que começa(x,y)
e tem largura e altura especificadas. - Use a
fillStyle
propriedade para definir o estilo de preenchimento do retângulo.