MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 76693 of Formas de desenho

  • Slug da revisão: Tutorial_do_Canvas/Formas_de_desenho
  • Título da revisão: Formas de desenho
  • ID da revisão: 76693
  • Criado:
  • Autor: guerreirogabriel
  • É revisão atual? Sim
  • Comentário page created, 154 words added

Conteúdo da revisão

A Grade

Antes de começar a desenhar, nós precisamos falar um pouco sobre o sistema de cordenadas. No início da página anterior há um template de 150x150. Eu desenhei a grade padrão. Normalmente 1 unidade na grade corresponde à 1 pixel na tela. A origem da grade está posicionada no canto superior esquerdo (cordenada (0; 0)). Todos os elementos são posicionados pela sua origem. Então a posição do canto superior esquerdo do quadrado azul está em x pixels da esquerda e y pixels de cima (cordenada (x; y)). Mais tarde neste tutorial, nós veremos como reposicionar esta origem, rodar a grade e redimensionar. Por enquanto, trabalharemos com os padróes.

Desenhado formas

Diferente do SVG, o canvas suporta apenas uma forma primitiva - retângulos. Todas as outras formas devem ser criadas combinando uma ou mais formas. Por sorte, nós temos uma coleção de funções de desenho de formas que permite a composição de forma altamente complexas.

Fonte da revisão

<h2 id="A_Grade">A Grade</h2>
<p>Antes de começar a desenhar, nós precisamos falar um pouco sobre o <em>sistema de cordenadas</em>. No início da página anterior há um template de 150x150. Eu desenhei a grade padrão. Normalmente 1 unidade na grade corresponde à 1 pixel na tela. A origem da grade está posicionada no canto superior esquerdo (cordenada (0; 0)). Todos os elementos são posicionados pela sua origem. Então a posição do canto superior esquerdo do quadrado azul está em x pixels da esquerda e y pixels de cima (cordenada (x; y)). Mais tarde neste tutorial, nós veremos como reposicionar esta origem, rodar a grade e redimensionar. Por enquanto, trabalharemos com os padróes.</p>
<h2 id="Desenhado_formas">Desenhado formas</h2>
<p>Diferente do SVG, o canvas suporta apenas uma forma primitiva - retângulos. Todas as outras formas devem ser criadas combinando uma ou mais formas. Por sorte, nós temos uma coleção de funções de desenho de formas que permite a composição de forma altamente complexas.</p>
Reverter para esta revisão