Manual de Referência do Canvas HTML
Manual de Referência do Canvas HTML
HTML <canvas> tag é usada para desenhar gráficos dinamicamente através de script (geralmente JavaScript).
Para obter mais informações sobre <canvas>, leia nossa教程 de HTML Canvas.
Cor, estilo e sombra
| Propriedade |
Descrição |
| fillStyle |
Definir ou retornar a cor, o gradiente ou o padrão de preenchimento |
| strokeStyle |
Definir ou retornar a cor, o gradiente ou o padrão do 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 da sombra em relação à forma |
| shadowOffsetY |
Definir ou retornar a distância vertical da sombra em relação à forma |
Estilo da 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 do canto |
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 de um 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 um ponto específico no pincelada, sem criar uma linha |
| closePath() |
Criar um caminho que retorna ao ponto de início |
| lineTo() |
Adicionar um novo ponto e criar uma linha do ponto até o ponto especificado no pincelada |
| clip() |
Cortar uma área de qualquer forma e tamanho da pincelada original |
| quadraticCurveTo() |
Cria uma curva bezier de segundo grau |
| bezierCurveTo() |
Cria uma curva bezier de terceiro grau |
| arc() |
Cria um arco/curva (usado para criar círculos ou partes de círculos) |
| arcTo() |
Cria um arco/curva entre duas retas tangentes |
| isPointInPath() |
Retorna true se o ponto especificado estiver no caminho atual, caso contrário, retorna false |
Transformação
| Método |
Descrição |
| scale() |
Aumenta ou diminui o desenho atual |
| rotate() |
Gira o desenho atual |
| translate() |
Reinterpreta a posição (0,0) no canvas |
| transform() |
Substitui a matriz de transformação atual do desenho |
| setTransform() |
Redefine a transformação atual para a matriz unitária. Em seguida, execute transform(). |
Texto
| Propriedade |
Descrição |
| font |
Define ou retorna as propriedades de fonte atual do conteúdo do texto |
| textAlign |
Define ou retorna o alinhamento atual do conteúdo do texto |
| textBaseline |
Define ou retorna a linha de base atual usada para desenhar texto |
| Método |
Descrição |
| fillText() |
Desenha texto 'preeenchido' no canvas |
| strokeText() |
Desenha texto no canvas (sem preenchimento) |
| measureText() |
Retorna um objeto que contém a largura do texto especificado |
Desenho de imagem
| Método |
Descrição |
| drawImage() |
Desenha uma imagem, um canvas ou um vídeo no canvas |
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 de 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 no canvas |
| putImageData() |
Coloca os dados de imagem (do objeto ImageData especificado) de volta no canvas |
Composição
| Propriedade |
Descrição |
| globalAlpha |
Define ou retorna o valor alpha ou 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 da pilha de caminho salvo anteriormente |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
