objeto canvas
O objeto Canvas é novo em HTML5.
O HTML5 <canvas> tag é usada para desenhar gráficos, em tempo real, com JavaScript.
Acessar um objeto Canvas
Você pode acessar uma <canvas> elemento usando getElementById() :
Criar um objeto de lona
Você pode criar um <canvas> elemento usando o document. createElement() document. createElement() Método:
Nota: O <canvas> elemento não tem habilidades de desenho de sua própria (que é apenas um recipiente para gráficos) - você deve usar um script para realmente desenhar os gráficos.
O getContext() método devolve um objecto que fornece métodos e propriedades para o desenho sobre a tela.
Esta referência vai cobrir as propriedades e métodos da getContext("2d") objeto, que pode ser utilizado para desenhar texto, linhas, caixas, círculos, e mais - sobre a lona.
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 desfoque 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 da mitra |
retângulos
| Método | Descrição |
|---|
| rect() | Cria um retângulo |
| fillRect() | Desenha um "filled" rectângulo |
| strokeRect() | Desenha um retângulo (no fill) |
| clearRect() | Limpa os pixels especificado dentro de um determinado rectângulo |
caminhos
| Método | Descrição |
|---|
| fill() | Enche o desenho actual (path) |
| 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 a partir desse ponto até o último ponto especificado na tela |
| clip() | Clipes uma região de qualquer forma e tamanho do original da lona |
| quadraticCurveTo() | Cria uma curva de Bezier quadrática |
| bezierCurveTo() | Cria uma curva de Bezier cúbica |
| arc() | Cria um arco / curva (used to create circles, or parts of circles) |
| 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
| Método | Descrição |
|---|
| scale() | Dimensiona o desenho atual maior ou menor |
| rotate() | Gira o desenho atual |
| translate() | Remapeia a (0,0) posição na tela |
| transform() | Substitui a matriz de transformação de corrente para o desenho |
| setTransform() | Redefine transformar o atual para a matriz identidade. Em seguida, executa transform() |
Texto
| Propriedade | Descrição |
|---|
| font | Define ou retorna as propriedades de fonte atuais para conteúdo de texto |
| textAlign | Define ou retorna o alinhamento atual para o conteúdo do texto |
| textBaseline | Define ou retorna a linha de base atual texto usado quando desenho de texto |
| Método | Descrição |
|---|
| fillText() | Empates "filled" de texto na tela |
| strokeText() | Desenha texto na tela (no fill) |
| 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 pixel para o retângulo especificado em uma lona |
| putImageData() | Coloca os dados de imagem (from a specified ImageData object) 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 caminho estado salvo anteriormente e atributos |
| createEvent() | |
| getContext() | |
| toDataURL() | |
Propriedades padrão e Eventos
O objeto da lona também suporta o padrão propriedades e eventos .
Páginas relacionadas
Tutorial HTML: HTML5 Canvas
Referência HTML: HTML <canvas> tag