Descrição O HTML5 <canvas>
No entanto, o <canvas>
O getContext() método retorna um objeto que fornece métodos e propriedades para desenhar na tela.
Essa referência irá abranger as propriedades e métodos da getContext("2d") objeto, que pode ser usado para desenhar o texto, linhas, caixas, círculos, e mais - na tela.
Suporte a navegadores Os números na tabela especificar a primeira versão do browser que suporta totalmente o elemento.
Elemento <canvas> 4.0 9 2.0 3.1 9
Internet Explorer 9, Firefox, Opera, Chrome, Safari e apoio <canvas>
Nota: Internet Explorer 8 e versões anteriores, não suportam o <canvas>
Cores, estilos e sombras Propriedade Descrição fillStyle Define ou retorna a cor, gradiente ou padrão usado para preencher o desenho strokeStyle Define ou retorna a cor, gradiente ou padrão usado para cursos shadowColor Define ou retorna a cor a ser usada para sombras shadowBlur Define ou retorna o nível de desfocagem para sombras shadowOffsetX Define ou retorna a distância horizontal da sombra da forma shadowOffsetY Define ou retorna a distância vertical da sombra da forma
Estilos de linha Propriedade Descrição lineCap Define ou retorna o estilo das tampas para uma linha lineJoin Define ou retorna o tipo de canto criado, quando duas linhas se encontram lineWidth Define ou retorna a largura da linha atual miterLimit Define ou retorna o comprimento máximo de esquadria
retângulos Método Descrição rect() Cria um retângulo fillRect() Desenha um retângulo "cheio" strokeRect() Desenha um retângulo (sem preenchimento) clearRect() Limpa os pixels especificados dentro de um determinado rectângulo
caminhos Método Descrição fill() Preenche o desenho atual (caminho) stroke() Na verdade desenha o caminho que você definiu beginPath() Começa um caminho, ou redefine o caminho atual moveTo() Move o caminho para o ponto especificado na tela, sem a criação de uma linha closePath() Cria um caminho a partir do ponto atual de volta ao ponto de partida lineTo() Adiciona um novo ponto e cria uma linha para que o ponto a partir do último ponto especificado na tela clip() Clips de uma região de qualquer forma e tamanho da tela inicial quadraticCurveTo() Cria uma curva de Bezier quadrática bezierCurveTo() Cria uma curva de Bezier cúbica arc() Cria um arco / curva (usado para criar círculos, ou partes de círculos) arcTo() Cria um arco / curva entre duas tangentes isPointInPath() Retorna true se o ponto especificado está no caminho atual, caso contrário false
transformações Texto Propriedade Descrição font Define ou retorna as propriedades da fonte de corrente para o conteúdo do texto textAlign Define ou retorna o alinhamento atual para o conteúdo do texto textBaseline Define ou retorna a linha de base do texto atual usado na elaboração do texto
Método Descrição fillText() Desenha texto "cheio" na tela strokeText() Desenha o texto na tela (sem preenchimento) measureText() Retorna um objeto que contém a largura do texto especificado
Desenho imagem Método Descrição drawImage() Desenha uma imagem, lona, ou vídeo para a tela
Manipulação Pixel Propriedade Descrição width Retorna a largura de um objeto ImageData height Retorna a altura de um objeto ImageData data Retorna um objeto que contém dados de imagem de um objeto ImageData especificado
Método Descrição createImageData() Cria um novo, objeto ImageData em branco getImageData() Retorna um objeto ImageData que copia os dados de pixel para o retângulo especificado em uma lona putImageData() Coloca os dados de imagem (a partir de um objeto ImageData especificado) de volta para a tela
Composição Propriedade Descrição globalAlpha Define ou retorna o valor alfa ou transparência atual do desenho globalCompositeOperation Define ou retorna como uma nova imagem são desenhadas para uma imagem existente
De outros Método Descrição save() Salva o estado do contexto atual restore() Retorna o estado do caminho salvo anteriormente e atributos createEvent() getContext() toDataURL()