<canvas> é um elemento HTML que pode ser desenhado usando scripts (geralmente js)
< canvas > WebKit foi introduzido pela primeira vez pela Apple e usado no Dashboard e Safari do Mac OS X
Hoje, todos os principais navegadores suportam (IE9+, versões inferiores precisam apresentar o Explorer Canvas para oferecer suporte)
1. Comece a desenhar (contexto de renderização)O elemento <canvas> cria uma tela de tamanho fixo na qual o contexto de renderização CanvasRenderContext2D pode ser usado para desenhar e processar o conteúdo a ser exibido.
Para desenhar na tela, você deve primeiro obter o contexto de renderização CanvasRenderContext2D2d. (Isso se refere a 2D, não estou falando de webgl)
const canvas = document.getElementById('mycanvas');Exemplo
2. Propriedades do CanvasRenderContext2D:Você pode especificar o estilo do desenho definindo as propriedades do contexto.
Todas as propriedades são as seguintes:
| propriedade | Introdução |
|---|---|
| tela | elemento de tela |
| estilo de preenchimento | A cor, modo ou gradiente atual usado para preencher o caminho |
| fonte | Estilo da fonte |
| globalAlfa | Especifica a opacidade do conteúdo desenhado na tela |
| globalCompositeOperation | Especifique como uma cor é combinada com as cores já existentes na tela (composição) |
| linhaCap | Especifica como as extremidades da linha são desenhadas |
| linhaDashOffset | Definir deslocamento do traço |
| linhaJoin | Especifique como duas linhas estão conectadas |
| largura da linha | Especifica a largura da linha para operações de pincel (desenho de linha) |
| mitraLimit | Quando o atributo lineJoin é miter, esse atributo especifica a proporção máxima entre o comprimento da junção diagonal e a largura da linha. |
| sombraBlur | Nível de efeito de desfoque |
| sombraCor | cor da sombra |
| shadowOffsetX | Distância de deslocamento horizontal da sombra |
| shadowOffsetY | Distância de deslocamento vertical da sombra |
| estiloAVC | Cores, modos e gradientes para caminhos de pincel (desenhar) |
| textoAlign | alinhamento de texto |
| linha de base de texto | Alinhamento vertical do texto |
A largura e a altura do Canvas precisam ser especificadas usando os valores dos atributos largura e altura.
Se não for especificado, o tamanho padrão do Canvas é 300×150
A largura e a altura especificadas pelo estilo são apenas o tamanho de exibição do elemento canvas, não o tamanho do ambiente de desenho.
tela {largura: 1000px;altura: 600px;}<canvas id=mycanvas width=1000 height=600></canvas><canvas id=mycanvas1 width=500 height=300></canvas><canvas id=mycanvas2>< /canvas>...ctx.fillStyle = vermelho;ctx.fillRect(10, 10, 100, 100); Exemplo de largura e alturaPor que os estilos são definidos com o mesmo tamanho, mas exibidos de maneira completamente diferente?
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.