CanvasRenderingContext2D.rect()
O método CanvasRenderingContext2D.rect()
da Canvas 2D API cria um path (trajeto) para um retângulo na posição (x, y), cujo tamanho é determinado pelo width (largura) e height (altura). Esses quatro pontos estão conectados por linhas retas e o sub-path (sub-trajeto) é marcado como fechado, para que você possa fill (preencher)
ou stroke (contornar)
o retângulo.
Sintaxe
void ctx.rect(x, y, width, height);
Parameters
x
-
O valor da coordenada x que indica ponto de início (superior esquerdo) do retângulo.
y
-
O valor da coordenada y que indica ponto de início (superior esquerdo) do retângulo.
width
-
A largura do retângulo.
height
-
A altura do retângulo.
Exemplos
Usando o método rect
Isto é somente um simples fragmentode código que usa o método rect
para criar um path. Para verdadeiramente desenhar um path no canvas, você pode usar o método fill()
ou o stroke()
. Veja também os métodos fillRect()
e strokeRect()
, que podem fazer isto em um único passo.
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();
Edite o código abaixo e veja as alterações instantâneas no canvas:
Especificações
Specification |
---|
HTML Standard # dom-context-2d-rect-dev |
Compatibilidade com navegadores
BCD tables only load in the browser