Este artigo apresenta principalmente os exemplos de retângulos de desenho na tela HTML5. Este artigo usa três APIs: Fillrect, Strokerect e ClearRect. Amigos que precisam podem se referir a ele.
Este artigo é traduzido de Steve Fulton e Jeff Fulton Html5 Canvas, Capítulo 2, a forma básica do retângulo.
Vamos dar uma olhada na forma geométrica simples construída em tela - desenhando retângulos. Na tela, existem três maneiras de desenhar um retângulo: Fillrect, Stroke (Strokerect) e ClearRect. Obviamente, também podemos usar caminhos para representar todas as figuras, incluindo retângulos.
Aqui estão as APIs para os três métodos acima:
1.Fillrect (x, y, largura, altura). Desenhe um retângulo sólido a partir de (x, y), largura e altura.
2.STRAISTERECT (x, y, largura, altura). Desenhe uma caixa retangular a partir de (x, y), largura e altura. A caixa retangular será renderizada em diferentes estilos, de acordo com as propriedades atuais de Strokestyle, Line Lwidth, Linejoin e Miterlimit.
3.Clearrect (x, y, largura, altura). Limpe a área retangular a partir de (x, y), largura e altura, tornando -a completamente transparente.
Antes de chamar o método acima para desenhar tela, precisamos definir o estilo de preenchimento e derrame. A maneira mais básica de definir esses estilos é usar cores de 24 bits (indicadas em cordas hexadecimais). Aqui está um exemplo simples:
Copie o código