Como desenhar retângulos e texto com a lona HTML5

Algumas formas primitivas podem ser tiradas diretamente no contexto de elementos gráficos do lona

elemento do HTML5. As formas mais comuns são retângulos e texto, que também pode ter sombras. Veja como você criar ambos.

Desenhar retângulos com HTML5 canvas

É possível desenhar três tipos diferentes de rectângulos, como mostrado na figura:

  • clearRect (x, y, w, h): Apaga um retângulo com o canto superior esquerdo (x, y) E tamanho (w, h). Geralmente, processo de eliminação é desenhar com a cor de fundo.

  • fillRect (x, y, w, h): Desenha uma caixa com canto superior esquerdo (x, y) E tamanho (w, h). O retângulo é preenchido com o actualmente definido fillStyle.

  • strokeRect (x, y, w, h): Desenha uma caixa com canto superior esquerdo (x, y) E tamanho (w, h). A caixa não está preenchido, mas o contorno é desenhado no momento definido strokeStyle e usando a actual espessura da linha.

    image0.jpg

Aqui está o código que gera a figura:

draw function () {var desenho = document.getElementById ( "desenho") - var con = drawing.getContext ( "2d") - con.fillStyle = "red" -con.strokeStyle = "green" -con.lineWidth = " 5 "-con.fillRect (10, 10, 180, 80) -con.strokeRect (10, 100, 180, 80) -} // tração final

texto desenho com HTML5 canvas

o lona tag tem suporte completo para o texto. Você pode adicionar texto em qualquer lugar na tela, usando qualquer estilo da fonte e tamanho que você quiser, como mostrado nesta ilustração de uma tela com texto incorporado:

image1.jpg

O primeiro passo na elaboração do texto é escolher o tipo de letra. fontes de lona são criados através da atribuição de um tipo de letra para o contexto de fonte atributo. As fontes são definidas como a atribuição font-string única no CSS. Você pode especificar todas as características do tipo de letra na mesma ordem que você faz ao usar o atalho da fonte: estilo, variante, peso, tamanho e família.

Quando estiver pronto para exibir o texto real na tela, use o fillText () método, que aceita três parâmetros: o texto para mostrar e a posição X e Y da esquerda; lado do texto. O seguinte código produziu os resultados na figura:

função draw () {var desenho = document.getElementById ( "desenho") - var con = drawing.getContext ( "2d") - // clara backgroundcon.fillStyle = "white" -con.fillRect (0,0, 200, 200) - // chamar a fonte em redcon.fillStyle = -con.font = "20pt sans-serif" "vermelho" -con.fillText ( "Rochas de lona!", 5, 100) -con.strokeText ( "Rochas de lona! ", 5, 130) -} // sorteio final

Semelhante

menu