Usando elementos gráficos com tela, SVG e CSS3 (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]
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ópico | Descrição |
|---|---|
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. |
|
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. |
|
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. |
|
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.