Referências de Tela HTML
Referência de Tela HTML
Nosso tópico é Ref canvas . Os gráficos podem ser desenhados em tempo real com a tag <canvas> do HTML por meio de scripts (principalmente JavaScript).
Você pode descobrir mais sobre HTML <canvas> verificando nossa página HTML Canvas .
Benefícios de referência de tela HTML
O HTML Canvas é um recurso poderoso que permite aos desenvolvedores criar e manipular gráficos, animações e outros elementos visuais diretamente em uma página da web. Aqui estão alguns benefícios de usar o HTML Canvas:
- Visuais dinâmicos: com HTML Canvas, os desenvolvedores podem criar visuais dinâmicos que respondem à entrada do usuário, dados e outros fatores. Isso permite páginas da web mais envolventes e interativas que podem cativar e prender a atenção dos usuários.
- Versatilidade: O HTML Canvas pode ser usado para uma ampla variedade de finalidades, desde simples gráficos e gráficos até animações e jogos complexos. Essa versatilidade o torna uma ferramenta valiosa para desenvolvedores que desejam criar conteúdo da Web exclusivo e atraente.
- Velocidade: como o HTML Canvas é renderizado diretamente no lado do cliente, ele pode ser muito mais rápido do que outras tecnologias gráficas que requerem processamento no lado do servidor. Isso pode resultar em uma experiência de usuário mais responsiva e perfeita.
- Compatibilidade entre plataformas: o HTML Canvas é compatível com todos os principais navegadores da Web, o que significa que os desenvolvedores podem criar conteúdo que funcione em várias plataformas e dispositivos.
- Personalização: O HTML Canvas fornece aos desenvolvedores um alto grau de controle sobre a aparência e o comportamento de gráficos e outros elementos visuais. Isso permite um conteúdo da Web mais personalizado e adaptado que pode atender às necessidades específicas de usuários e empresas.
Sombras, cores e estilos
O HTML fornece várias maneiras de personalizar a aparência visual das páginas da Web, o que inclui a incorporação de elementos de design como sombras, cores e estilos. Esses elementos de design desempenham um papel vital para aprimorar a experiência do usuário e tornar o conteúdo mais acessível para usuários com diferentes requisitos.
As sombras podem ser empregadas para criar um efeito 3D para componentes HTML, gerando a impressão de camadas e elevando o design geral. As cores podem ser utilizadas para produzir contraste e destacar elementos significativos e para construir uma identidade de marca usando um esquema de cores consistente.
Estilos são o elemento de design mais adaptável em HTML e podem ser usados para modificar a aparência de texto, links, botões e outros componentes. Eles podem ser utilizados para manter uma aparência consistente em toda a página da Web ou criar elementos visuais exclusivos que chamam a atenção do usuário.
Por meio do uso criativo de sombras, cores e estilos, você pode criar páginas da Web visualmente agradáveis e práticas, tornando-as mais acessíveis a todos os usuários.
| Propriedade | Visão geral |
|---|---|
| cor da sombra | Retorna a cor especificada como uma cor de sombra ou a define. |
| shadowOffsetY | O espaço vertical entre a forma e a sombra na tela Ref pode ser especificado ou retornado. |
| StrokeStyle | A cor, gradiente ou padrão do traçado é especificado ou retornado. |
| fillStyle | Especifica ou retorna a cor, gradiente ou padrão a ser usado para preencher o desenho. |
| shadowOffsetX | Esta função especifica ou retorna o espaço horizontal entre a forma e a sombra. |
| shadowblur | Os níveis de desfoque de sombra podem ser especificados ou retornados. |
| Método | Visão geral |
|---|---|
| addColorStop() | Em um objeto gradiente, a cor e as coordenadas de parada podem ser determinadas. |
| criarPadrão() | Indica a direção na qual um elemento deve ser replicado. |
| criarRadialGradient() | Gera um gradiente radial ou circular (a ser aplicado ao conteúdo da tela). |
| criarLinearGradient() | Define um gradiente linear (a ser aplicado ao conteúdo da tela). |
Estilos de linha
O HTML fornece uma variedade de estilos de linha que podem ser usados para aprimorar a aparência das páginas da Web.
| Propriedade | Visão geral |
|---|---|
| lineJoin | Quando duas linhas se encontram, esta função define ou retorna o tipo de canto que é criado. |
| espessura da linha | A largura da linha atual na tela Ref é definida ou retornada. |
| limite de linha | O estilo das extremidades de uma linha pode ser configurado ou retornado na tela Ref . |
| miterLimit | Um comprimento máximo de esquadria pode ser especificado e, opcionalmente, retornado. |
Retângulos
Além das formas básicas de retângulo, o HTML também permite que você personalize a aparência dos retângulos de várias maneiras. Isso inclui alterar a cor, o estilo da borda e o tamanho do retângulo, além de adicionar cantos arredondados ou outros elementos decorativos.
| Método | Visão geral |
|---|---|
| cursoRect() | Cria um retângulo sem preenchê-lo. |
| fillRect() | Cria um retângulo que é “preenchido”. |
| rect() | O método cria um retângulo. |
| clearRect() | Esta função limpa os pixels dentro de um retângulo que foram fornecidos. |
Caminhos
Os caminhos podem ser usados para criar uma variedade de formas, desde formas geométricas simples até designs mais complexos, como logotipos e ícones. O HTML fornece várias maneiras de criar caminhos, incluindo o uso do elemento <svg>, que é comumente usado para criar gráficos vetoriais escaláveis.
Além de criar formas básicas, os caminhos também podem ser personalizados de várias maneiras. Isso inclui alterar a cor do traço e a largura do caminho, bem como adicionar preenchimentos, gradientes e outros elementos decorativos.
| Método | Visão geral |
|---|---|
| grampo() | Ele permite que você recorte partes de qualquer forma ou tamanho da tela original. |
| beginPath() | Inicie um novo caminho ou reinicie o atual. |
| mover para() | Em vez de criar uma linha na tela Ref , o caminho é deslocado para o local escolhido na tela. |
| closePath() | A posição atual é retornada à posição inicial fazendo um caminho. |
| quadráticaCurveTo() | Esta função gera uma curva Bézier quadrática. |
| bezierCurveTo() | Esta função gera uma curva Bézier cúbica. |
| preencher() | Cria um caminho que preenche o desenho atual. |
| AVC() | Essencialmente, o caminho que você definiu é desenhado. |
| arco() | Gera arcos e curvas (usados para desenhar círculos e partes de círculos). |
| arcTo() | A função gera um arco ou curva entre pares de tangentes. |
| linhaTo() | Um novo ponto é anexado à tela e uma linha é desenhada do ponto anterior ao ponto recém-adicionado. |
| isPointInPath() | Esta função retorna verdadeiro se o ponto referenciado estiver no caminho atual, ou então retorna falso. |
Transformações
O HTML fornece um poderoso conjunto de ferramentas para transformar e manipular a aparência dos elementos em uma página da web. As transformações podem ser usadas para girar, dimensionar, inclinar ou traduzir elementos, criando designs visualmente dinâmicos e atraentes.
As transformações são obtidas por meio do uso de propriedades CSS, como transform e translate, que permitem aos desenvolvedores manipular a posição e a orientação dos elementos em uma página da web. Além das transformações básicas, você também pode usar CSS para criar efeitos mais complexos, como transformações 3D e animações.
| Método | Visão geral |
|---|---|
| girar () | O desenho atual é invertido. |
| traduzir() | Na tela Ref , redefina as coordenadas (0,0). |
| transformar() | A matriz de transformação existente para o desenho é atualizada |
| escala() | Aumenta ou diminui o tamanho do desenho atual. |
| setTransform() | Esta função redefine a transformação atual para a matriz de identidade. Depois, execute transform(). |
Texto
O texto é um componente fundamental de qualquer página da Web, fornecendo o principal meio de comunicação de informações aos usuários. O HTML fornece uma ampla variedade de ferramentas para personalizar e estilizar texto, permitindo criar designs visualmente atraentes e eficazes.
O texto HTML pode ser personalizado de várias maneiras, incluindo a alteração de estilos de fonte, tamanhos e cores. Os desenvolvedores também podem usar propriedades CSS para ajustar o alinhamento do texto, espaçamento e altura da linha, bem como adicionar elementos decorativos como sombras, gradientes e texturas.
| Propriedade | Visão geral |
|---|---|
| Fonte | Esta função especifica ou retorna as propriedades de fonte existentes para um trecho de texto. |
| linha de base de texto | Ao desenhar o texto, esta função especifica ou retorna a linha de base do texto atual. |
| Método | Visão geral |
|---|---|
| strokeText() | Cria um desenho de texto na tela sem preenchê-lo |
| medidaTexto() | Fornece um objeto contendo a largura do texto correspondente. |
| fillText() | Na tela, crie um texto “preenchido”. |
Desenho de imagem
As imagens são um elemento poderoso e essencial do design da Web, permitindo que os desenvolvedores criem páginas da Web visualmente envolventes e dinâmicas. O HTML fornece uma variedade de ferramentas para projetar e personalizar imagens, desde dimensionamento e posicionamento básicos até efeitos mais complexos, como filtros e animações.
Com HTML, você pode ajustar o tamanho e a proporção das imagens para caber perfeitamente em suas páginas da web. Eles também podem usar propriedades CSS para aplicar filtros, como sépia, escala de cinza ou desfoque, às imagens, criando efeitos únicos e visualmente interessantes.
| Método | Visão geral |
|---|---|
| drawImage() | Imagem, tela ou vídeo podem ser criados na tela. |
Manipulação de pixels
A manipulação de pixels em HTML pode ser particularmente útil na criação de visualizações, como tabelas e gráficos, e no aprimoramento de imagens para uso em web design. Aproveitando o poder da manipulação de pixels HTML, você pode criar páginas da Web visualmente impressionantes e dinâmicas que envolvem os usuários e transmitem informações importantes de maneira significativa.
| Propriedade | Visão geral |
|---|---|
| altura | Os objetos ImageData são retornados por sua altura. |
| largura | Os objetos ImageData são retornados por sua largura. |
| dados | Este método retorna um objeto contendo dados de imagem de um determinado objeto ImageData. |
| Método | Visão geral |
|---|---|
| putImageData() | Os dados da imagem (de um objeto ImageData) são colocados de volta na tela. |
| getImageData() | Copia e retorna os dados de pixel para o retângulo fornecido em uma tela usando um objeto ImageData. |
| createImageData() | Cria um objeto ImageData do zero. |
Composição
A composição HTML envolve o processo de sobreposição de diferentes elementos ou imagens em uma página da Web para formar visuais complexos. Essa técnica permite que os desenvolvedores combinem vários elementos, alterem sua transparência e criem efeitos visuais exclusivos.
Um dos métodos comumente usados para composição em HTML é a propriedade CSS "opacidade", que permite aos desenvolvedores ajustar a transparência de um elemento para obter um efeito específico. Além disso, a propriedade “z-index” é outra técnica de composição em HTML que determina a ordem de camadas dos elementos, permitindo que os desenvolvedores criem uma sensação de profundidade e dimensionalidade em uma página da web.
No web design, a composição HTML pode ajudar a criar interfaces visualmente atraentes e efeitos dinâmicos, como animações. Essa técnica aprimora os aspectos estéticos e funcionais de uma página da Web, tornando-a atraente e visualmente estimulante. Ao utilizar o poder da composição HTML, você pode criar páginas da Web que não sejam apenas funcionais, mas também esteticamente atraentes.
| Propriedade | Visão geral |
|---|---|
| globalCompositeOperation | Especifica ou retorna a forma como uma nova imagem será desenhada sobre a atual. |
| globalAlpha | A transparência atual ou valor alfa do desenho é especificado ou retornado. |
Outro
Você também pode usar os seguintes métodos:
| Método | Visão geral |
|---|---|
| getContext() | Os dados da tela podem ser recuperados. |
| salvar() | O estado de contexto existente é armazenado. |
| restaurar() | O estado salvo anteriormente e os atributos do diretório são retornados. |
| toDataURL() | Crie uma URL para dados dentro da tela. |
| criar Evento() | No Canvas, crie um evento. |
