Como desenhar retângulos e texto com a tela html5

Algumas formas primitivas podem ser desenhado directamente sobre o contexto de gráficos da tela de pintura

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

Video: HTML5 CSS3 Animated Repeating Tile Background keyframes Tutorial

Desenhar retângulos com HTML5 canvas

Você pode desenhar três tipos diferentes de retângulos, como mostrado na figura:

• clearRect (x, y, w, h): Apaga um rectângulo com o canto superior esquerdo (x, y) E o tamanho (w, h). Geralmente, apagando vai chamar na cor de fundo.

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

  Video: Como desenhar retângulos com HTML5 | CANVAS

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

  

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

função sorteio () {var desenho = document.getElementById ("desenhando") Con -var = drawing.getContext ("2d") = -con.fillStyle "vermelho"-con.strokeStyle = "verde"-con.lineWidth = "5"-con.fillRect (10, 10, 180, 80) -con.strokeRect (10, 100, 180, 80) -} // tração final

texto desenho com HTML5 canvas

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

Video: 079 HTML5 Canvas strokeRect para desenhar retângulos

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

Video: HTML5 Tutorial - 6 - Introduction to pseudo-classes

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

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