Usando elementos gráficos com tela, SVG e CSS3 (HTML)

Applies to Windows and Windows Phone

Esta seção contém informações sobre como usar elementos gráficos no seu aplicativo da Windows Store em JavaScript.

Nesta seção

TópicoDescrição

Guia de início rápido: desenhando em uma tela

O elemento tela produz uma tela retangular de bitmaps em sua página onde você pode usar JavaScript para desenhar imediatamente imagens gráficas. A tela é ótima para criar jogos ou qualquer situação na qual você está gerando elementos gráficos em tempo real ou mudando-os regularmente.

Como animar gráficos de tela

O elemento de tela é uma região para desenho no documento HTML em que você pode usar o JavaScript para gerar gráficos como animações, gráficos e jogos. Esse tópico tem início através da descrição das etapas necessárias para animar um desenho básico usando o elemento de tela.

Como criar um gradiente

Formas e linhas não são limitadas às cores sólidas. Um gradiente usado na tela é realmente um tipo de valor de cor, portanto, você pode aplicá-lo às propriedades fillStyle e strokeStyle.

Os gradientes podem ser usados para produzir uma alteração direcional na intensidade ou na cor em uma imagem. Isto é útil para produzir imagens de fundo, indicando altitude em mapas ou em qualquer lugar onde você deseja adicionar luz e sombra para uma superfície.

Gradientes são uteis na dinamização de aplicativos da Web já que podem evitar o uso de imagens para obter esses efeitos além de minimizar a largura de banda e o tempo necessário para carregá-los. E como são produzidos de maneira programática, podem ser escalados e reutilizados facilmente.

Como exibir uma imagem

O elemento de tela é uma região para desenho no documento HTML em que você pode usar JavaScript para gerar gráficos como animações, gráficos e jogos. Este tópico descreve as etapas necessárias para animar um desenho básico usando o elemento de tela.

 

Você pode usar telas CSS e SVG em aplicativos da Windows Store para adicionar elementos gráficos vetoriais rápidos e leves e para animar sua interface do usuário.

Quase todo elemento gráfico vetorial pode ser desenhado usando SVG ou Canvas, mas às vezes há muito mais trabalho a ser feito pelo desenvolvedor ou pelo computador, dependendo da tarefa.

Transformações CSS3 (Folhas de Estilo em Cascata, Nível 3) 2D permitem a translação (movimentação), a rotação, o dimensionamento e a distorção de objetos no espaço 2D. As transformações CSS3 3D oferecem suporte a essas mesmas transformações no espaço 3D, com a capacidade adicional de simular uma sensação de profundidade por meio da transformação da perspectiva.

Quando várias transformações são especificadas individualmente, seus resultados são cumulativos e dependem da ordem de aplicação.

 

 

Mostrar:
© 2014 Microsoft