Organize alguns novos recursos do HTML5 e propriedades comuns de tela

Este artigo apresenta principalmente alguns novos recursos do HTML5 e a classificação de propriedades comuns da tela. A API de tela é um conteúdo importante usado no HTML5 para desenhar gráficos. Amigos que precisam podem se referir aos seguintes tipos de conteúdo HTML5

dica

A API dos seletores não é apenas conveniente. Quando se trata de atravessar o DOM, a API dos seletores é geralmente mais rápida que a API de pesquisa de nó infantil anterior. Para implementar uma folha de estilo rápida, o navegador otimiza altamente a correspondência de seletor.

A tela é essencialmente uma tela de bitmap, onde os gráficos desenhados nela não são escaláveis ​​e não podem ser ampliados e reduzidos como uma imagem SVG. Além disso, os objetos desenhados com tela não pertencem à estrutura da página ou a qualquer espaço para nome.

Programação com tela, você deve primeiro obter seu contexto. Em seguida, execute ações no contexto e, finalmente, aplique essas ações ao contexto.

As coordenadas na tela começam no canto superior esquerdo, o eixo x se estende à direita na direção horizontal (por pixels) e o eixo y se estende na direção vertical. O ponto com as coordenadas do canto superior esquerdo x = 0 e Y-0 é chamado de origem.

Como a maioria dos elementos HTML, o elemento tela também pode adicionar fronteiras aplicando CSS, margens internas, margens externas etc. e alguns atributos CSS também podem ser herdados por elementos na tela.

Correção - No sistema de desenho, a declaração é a transformação - pode ser aplicada sequencialmente, combinada ou modificada à vontade quando aplicada. Os resultados de cada operação de desenho devem ser corrigidos através da camada de correção antes de ser exibida na tela. Embora isso adicione complexidade adicional, ele adiciona recursos mais poderosos ao sistema de desenho, o que pode suportar o processamento de imagens em tempo real, como as ferramentas atuais de edição de imagens mainstream, de modo que a complexidade desta parte do conteúdo da API é necessária.

Há uma sugestão importante sobre o código reutilizável: geralmente, o desenho deve começar a partir da origem (0,0 pontos no sistema de coordenadas), aplicar transformação (escala, tradução, rotação etc.) e modificar continuamente o código até que o efeito desejado seja alcançado.

Função do caminho do contexto

(1) moveto (x, y): não desenha, basta mover a posição atual para a nova coordenada de destino (x, y);

(2) lineto (x, y): não apenas move a posição atual para a nova coordenada de destino (x, y), mas também desenha uma linha reta entre as duas coordenadas.

(3) ClosePath (): O comportamento dessa função é muito semelhante ao lineto. A única diferença é que Closepaht usará automaticamente a coordenada inicial do caminho como coordenada de destino. ClosePath também informa a tela que a figura desenhada atualmente foi fechada ou formou uma área completamente fechada, o que é muito útil para preenchimentos e traços futuros.

(4) STROKERECT (): Desenhe o contorno do retângulo com base na posição dada e coordenadas.

(5) ClearRect (): Limpe todo o conteúdo na área do retângulo e restaurá -lo ao seu estado inicial, ou seja, cor transparente.

(6) quadraticcurveto (): o ponto de partida da função que desenham uma curva é a coordenada atual, com dois conjuntos de bordas (x, y). O segundo grupo refere -se ao ponto final da curva. O primeiro grupo representa pontos de controle. O chamado ponto de controle está localizado ao lado da curva (não acima da curva), e seu efeito é equivalente à criação de uma força de tensão na curva. Ao ajustar a posição do ponto de controle, a curvatura da curva pode ser alterada.

As imagens aumentam a complexidade das operações de tela: você deve esperar até que a imagem esteja totalmente carregada antes que ela possa ser operada. Os navegadores geralmente carregam imagens de forma assíncrona enquanto o script da página é executado. Se a visualização renderizar a imagem na tela antes de estar totalmente carregada, a tela não exibirá nenhuma imagem.

O gradiente refere -se ao uso de algoritmos de amostragem gradual em conjuntos de cores e a aplicar os resultados a estilos de AVC e preencher estilos.

O uso de gradientes requer três etapas:

(1) criar um objeto de gradiente;

(2) Defina a cor para objetos de gradiente e indique o método de transição;

(3) Defina gradientes para estilos de preenchimento ou estilos de traços no contexto.

Para definir qual cor para exibir, use a função AddColorStop no objeto Gradiente. Esta função permite especificar dois parâmetros: cor e deslocamento. Parâmetros de cores são as cores que os desenvolvedores desejam usar quando são acariciados ou preenchidos em posições de deslocamento. O deslocamento é um valor entre 0,0 e 1,0, representando até que ponto a distância é alterada ao longo da linha de gradiente.

Além dos gradientes lineares, a API de tela HTML5 também suporta gradientes radioativos. O chamado gradiente radioativo significa que a cor muda suavemente na área cônica entre dois círculos especificados. Os pontos de terminação de cores usados ​​para gradientes radioativos e gradientes lineares são os mesmos.