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

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: desenhar 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:
© 2015 Microsoft