Canvas do HTML
O canvas do HTML oferece funcionalidades mais primitivas, adequadas para processamento de pixels, renderização dinâmica e desenho de grandes volumes de dados.
O que é o canvas do HTML
HTML5 A tag <canvas> é usada para desenhar gráficos dinamicamente através de scripts (normalmente JavaScript).
Mas, o elemento <canvas> não possui suas próprias funções de desenho (ele é apenas um contêiner de gráficos).-É necessário usar scripts para desenhar graficamente.
O método getContext() retorna um objeto que fornece métodos e propriedades para desenhar no canvas.
Esta referência explicará getContext("2As propriedades e métodos do objeto "d)" podem ser usados para desenhar texto, linhas, caixas, círculos etc. no canvas.
Suporte do navegador
IEFirefoxOperaChromeSafari
Internet Explorer 9Firefox, Opera, Chrome e Safari suportam os atributos e métodos do <canvas>.
Atenção:Internet Explorer 8 e versões mais antigas do Internet Explorer não suportam o elemento <canvas>.
Cor, estilo e sombra
| Propriedade | Descrição |
| fillStyle | Definir ou retornar a cor, gradiente ou padrão usado para preencher a pintura. |
| strokeStyle | Definir ou retornar a cor, gradiente ou padrão usado para o traço. |
| shadowColor | Definir ou retornar a cor da sombra. |
| shadowBlur | Definir ou retornar o nível de desfoque da sombra. |
| shadowOffsetX | Definir ou retornar a distância horizontal entre a sombra e a forma. |
| shadowOffsetY | Definir ou retornar a distância vertical entre a sombra e a forma. |
Estilo de linha
| Propriedade | Descrição |
| lineCap | Definir ou retornar o estilo do ponto final da linha. |
| lineJoin | Definir ou retornar o tipo de canto criado ao cruzar duas linhas. |
| lineWidth | Definir ou retornar a largura da linha atual. |
| miterLimit | Definir ou retornar o comprimento máximo da escarpa. |
Retângulo
| Método | Descrição |
| rect() | Criar um retângulo. |
| fillRect() | Desenhar um retângulo "preenchido". |
| strokeRect() | Desenhar um retângulo (sem preenchimento). |
| clearRect() | Limpar os pixels especificados dentro do retângulo dado. |
Caminho
| Método | Descrição |
| fill() | Preencher o desenho atual (caminho). |
| stroke() | Desenhar o caminho definido. |
| beginPath() | Iniciar um caminho ou redefinir o caminho atual. |
| moveTo() | Mover o caminho para o ponto especificado na tela de pintura, sem criar uma linha. |
| closePath() | Criar um caminho que vai do ponto atual ao ponto inicial. |
| lineTo() | Adicionar um novo ponto e criar uma linha na tela de pintura do ponto final especificado. |
| clip() | Cortar uma área de qualquer forma e tamanho da tela de pintura original. |
| quadraticCurveTo() | Criar uma curva bézier de segundo grau. |
| bezierCurveTo() | Criar uma curva bézier de terceiro grau. |
| arc() | Criar um arco/Curva (usada para criar círculos ou partes de círculos). |
| arcTo() | Criar um arco entre duas tangentes./Curva |
| isPointInPath() | Retorna true se o ponto especificado estiver no caminho atual, caso contrário, retorna false. |
Transformação
| Método | Descrição |
| scale() | Aumentar ou diminuir o desenho atual. |
| rotate() | Girar a desenho atual. |
| translate() | Re-mapear a posição (0,0) na tela de pintura. |
| transform() | Substituir a matriz de transformação atual do desenho. |
| setTransform() | Restabelecer a transformação atual para a matriz de unidade. Em seguida, execute transform(). |
Texto
| Propriedade | Descrição |
| font | Definir ou retornar as propriedades de fonte atual do conteúdo do texto. |
| textAlign | Definir ou retornar o alinhamento atual do conteúdo do texto. |
| textBaseline | Definir ou retornar a linha de base atual usada para desenhar texto. |
| Método | Descrição |
| fillText() | Desenhar "texto preenchido" na tela de pintura. |
| strokeText() | Desenhar texto na tela de pintura (sem preenchimento). |
| measureText() | Retorna um objeto que contém a largura da texto especificada. |
Desenho de imagem
| Método | Descrição |
| drawImage() | Desenhar imagens, canvas ou vídeos na tela de pintura. |
Operações de pixel
| Propriedade | Descrição |
| width | Retorna a largura do objeto ImageData. |
| height | Retorna a altura do objeto ImageData. |
| data | Retorna um objeto que contém os dados da imagem do objeto ImageData especificado. |
| Método | Descrição |
| createImageData() | Cria um novo objeto ImageData, vazio. |
| getImageData() | Retorna um objeto ImageData, que contém os dados de pixels de um retângulo especificado na tela. |
| putImageData() | Coloca os dados da imagem (do objeto ImageData especificado) de volta na tela. |
Composição
| Propriedade | Descrição |
| globalAlpha | Define ou retorna o valor alpha ou a transparência atual do desenho. |
| globalCompositeOperation | Define ou retorna como a nova imagem deve ser desenhada sobre a imagem existente. |
Outros
| Método | Descrição |
| save() | Salva o estado atual do ambiente. |
| restore() | Retorna o estado e as propriedades do caminho salvo anteriormente. |
| createEvent() | |
| getContext() | |
| toDataURL() | |