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 fillStyleatributo do contexto do desenho 2D determinará o estilo de preenchimento do retângulo.
Exemplo de JavaScript fillRect()
O seguinte mostra o index.htmlarquivo 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.jsarquivo 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 #F9DC5Ccor 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 150pixels e a heightlargura de 100pixels.
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.htmlarquivo 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.cssarquivo:
canvas {
border: solid 1px #ccc;
background-color: #000;
}Linguagem de código: CSS ( css )No app.jsarquivo, 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
fillStylepropriedade para definir o estilo de preenchimento do retângulo.
