🐨 🐺 😯 Memorando da API do Canvas 🧗🏽 📢 🧑🏾‍🤝‍🧑🏻

Bom dia amigos

Este artigo é uma pequena seleção de exemplos de trabalho com a API do Canvas, que é conveniente consultar, se necessário, para recuperar o material estudado.

Este não é um guia para trabalhar com canvas, mas apenas uma demonstração de seus recursos.

Para mim, esse também é um tipo de subtotal no estudo da tela.

O código é dividido em blocos de sandbox separados, que são colocados sob o "corte" para facilitar a leitura.

Alguns pontos importantes.

A largura e a altura da tela são melhor determinadas usando os atributos:

<canvas width="300" height="300"></canvas>

Se quisermos que toda a área de visualização seja uma tela, faça o seguinte:

const width = canvas.width = innerWidth
const height = canvas.height = innerHeight

Normalmente, defino a tela e o contexto de desenho bidimensional da seguinte maneira:

const canvas = document.querySelector('canvas')
//     jQuery
const $ = canvas.getContext('2d')

Chega de palavras.

Vamos começar com formas simples.

Linha:

Retângulo (quadrado):

Triângulo:

Um círculo:

Curvas de Bezier:

Curvas quadráticas:

Curvas cúbicas:

Vamos fazer algumas experiências.

Cor da linha:

Cor de preenchimento:

Transparência (canal alfa):

Transparência (RGBA):

Nós seguimos em frente.

Texto:

Métricas de texto (fonte):

Gradiente:

Cenário:

Padrão (Padrão):

Nós implementamos várias funções.

Função de desenho de polígono:

Função de desenho de floco de neve:

Função de quebra de texto:

: .

A função de obter as coordenadas do cursor:

Nós seguimos em frente.

Determine a cor da imagem:

( ) : harryheman.imtqy.com/art.jpg.

Desenhe o ícone de inicialização:

Implementamos o rastreamento do cursor:

Crie um texto interativo:

Veja também:

Obrigado pelo seu tempo. Espero que tenha sido bem gasto.

Memorando da API do Canvas

More articles: