Canvas faz parte do HTML5 e permite que linguagens de script renderizem imagens dinamicamente. Canvas define uma área. A largura e a altura da área podem ser definidas por atributos HTML que podem acessar a área e renderizar renderizações dinâmicas na página da web por meio de um conjunto completo de funções de desenho (API).
2. O que o Canvas pode fazerJogos: Não há dúvida de que os jogos desempenham um papel importante no campo do HTML5. HTML5 é mais tridimensional e mais sofisticado que o Flash em termos de exibição de imagens baseadas na Web.
Produção de gráficos: A produção de gráficos é frequentemente ignorada pelas pessoas, mas a comunicação e a cooperação dentro de uma empresa ou entre empresas são inseparáveis dos gráficos. Alguns desenvolvedores agora usam HTML/CSS para criar ícones. É claro que usar SVG (Scalable Vector Graphics) para concluir a produção de gráficos também é uma boa maneira.
Design de fontes: A renderização personalizada de fontes será totalmente baseada na web e implementada usando a tecnologia HTML5.
Editor gráfico: O editor gráfico pode ser 100% baseado na web.
Outros conteúdos que podem ser incorporados ao site: como gráficos, áudio, vídeo e muitos outros elementos podem ser melhor integrados à Web e não requerem plug-ins.
3. Uso básico do Canvas1. Ao usar <canvas>, você deve primeiro definir seus atributos de largura e altura e especificar o tamanho da área desenhável. Se você especificar apenas a largura e a altura sem adicionar estilos ou desenhar imagens, o elemento não ficará visível na página. .
<canvas id='draw' width='200px' height='200px'></canvas>
2. Para desenhar uma imagem, primeiro precisamos obter a tela e chamar o método getContext() e, em seguida, passar o nome do contexto (2D/3D tem duas operações básicas de desenho | preenchimento (fillStyle) | ) | O valor padrão dessas duas propriedades é #000
var draw = document.getElementById('draw'); //Confirme se o navegador suporta o elemento <canvas> if(draw.getContext){ var context = draw.getContext('2d'); o contexto context.strokeStyle = '#f00' //A cor da pradaria preenchida interior context.fillStyle = '#0f0';}3. Utilize o método toDataURL() para exportar a imagem desenhada no elemento <canvas>.
var draw = document.getElementById('draw');if(draw.getContext){ //Exibe a imagem, toDataURL() obtém uma string de string base64 var drawURL = draw.toDataURL('image/png') ; = document.createElement('img'); imagem.src = drawURL;4. Existem três métodos principais para desenhar um retângulo. fillRect() é a cor de preenchimento do retângulo, strokeRect() é o traço do retângulo e clearRect() limpa o retângulo. Todos esses três métodos recebem 4 parâmetros x/y/w/h, as coordenadas do canto superior esquerdo do retângulo e a largura e altura.
var draw = document.getElementById('draw'); //Confirme se o navegador suporta o elemento <canvas> if(draw.getContext){ var context = draw.getContext('2d'); um contorno verde Borda context.fillStyle = '#f00' context.strokeStyle = '#0f0'; context.fillRect(10,10,50,50); //Desenhe um retângulo verde com um traço vermelho context.fillStyle = '#0f0'; , 50);context.fillRect(10,10,50,50); //Limpa um pequeno retângulo onde os dois retângulos se sobrepõem context.clearRect(40,40,10,10);}5. Desenhar caminhos. Formas e linhas complexas podem ser criadas por meio de caminhos. Para desenhar um caminho, primeiro chame o método BeginPath() e, em seguida, use o método a seguir para realmente desenhar o caminho.
arco (x, y, raio, ângulo inicial, ângulo final, sentido anti-horário)
(x, y) coordenadas do centro do círculo, raio, (startAngle, endAngle) ângulo inicial e ângulo final, sentido anti-horário sentido horário (falso)/sentido anti-horário (verdadeiro)
moveTo(x,y) move o cursor para (x,y) sem desenhar uma linha. Pode ser usado para modificar as chamadas coordenadas do ponto anterior*
arcoPara(x1,y1,x2,y2,raio)
Desenhe uma curva começando do ponto anterior até (x2, y2) e passando por (x1, y1) com o raio fornecido
lineTo(x,y) desenha uma linha reta do ponto anterior até (x,y)
rect(x,y,largura,altura)
Desenhe um retângulo começando em (x, y), com largura e altura como largura e altura. Este método desenha um caminho retangular em vez das formas independentes desenhadas por strokeRect() e fillRect()
//Em seguida, desenhe um relógio sem números var draw = document.getElementById('draw');if(draw.getContext){ var context = draw.getContext('2d'); //Caminho inicial context.beginPath( ); /Desenhe o círculo externo context.arc(100,100,99,0,2*Math.PI,false); //Desenhe o círculo interno context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //Desenhe o ponteiro dos minutos context.moveTo(100,100); ,15) ; //Desenhe o ponteiro das horas context.moveTo(100,100); //Caminho do traço context.stroke();6. Existem dois métodos principais para desenhar texto, fillText() e StrokeText(), ambos recebendo quatro parâmetros |texto (texto a ser desenhado)|x|y|largura máxima de pixels (opcional)|. com base nos três atributos a seguir
estilo do texto da fonte, tamanho, fonte, etc.
textAlinhar alinhamento de texto |início|fim|esquerda|direita|centro|
textBaseline A linha de base do texto|top|hanging|middle|alphabetic|ideographic|bottom|
//Desenhe 12 horas no mostrador context.font = 'bold 12px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle';
7. Transformação
girar(anjo) gira o ângulo da imagem em radianos em torno da origem
scale(scaleX,scaleY) dimensiona a imagem, x*scaleX,y*scaleY o padrão é 1
translate(x,y) move a origem da coordenada para (x,y)
var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); //Caminho inicial context.beginPath(); 100,100,99,0,2*Math.PI,false); //Desenhe o círculo interno context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //Transforma a origem context.translate(100,100); //Gira o ponteiro context.rotate(1) //Desenha o ponteiro dos minutos context. moveTo(0, 0); context.lineTo(0,-85); //Desenhe o ponteiro das horas context.moveTo(0,0); //Caminho do traço context.stroke();8. Desenhe uma imagem, drawImage()
var img = document.getElementByTagNames('imagem')[0];9 parâmetros: a imagem a ser desenhada, a imagem original |x|y|w|h|, a imagem alvo |x|y|w|h|
9. Sombras e gradientes
Shadow possui principalmente os seguintes valores de atributos:
var context = draw.getContext('2d'); //Definir sombra context.shadowColor = 'rgba(210,210,210,.5)'; existem quatro parâmetros |x1|y1|x2|y2| que são as coordenadas do ponto inicial e as coordenadas do ponto final var gradiente = context.createLinearGradient(30,30,70,70); gradiente.addColorStop(0,'#fff'); //0 significa início gradiente.addColorStop(1,'#000'); O atributo de gradiente definido context.fillStyle = gradiente //Coloque o gradiente ao preencher context.fillRect(30,30,50,50);Crie um gradiente radial createRadialGradient(), os seis parâmetros |x1|y2|radius1|x2|y2|radius2| são o centro e raio do primeiro círculo e o centro e raio do segundo círculo, respectivamente.
10. Usando dados de imagem, você pode obter os dados da imagem original por meio de getImageData(). Quatro parâmetros |x|y|w|h|. Cada objeto ImageData possui três atributos, largura/altura/dados. Dados é uma matriz que armazena os dados de cada pixel internamente.
var imgdata = context.getImageData(0,0,100,100); var data = imgdata.data, red = data[0], green = data[1], blue = data[2], alpha = data[3]; Um filtro cinza var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha //Desenhe a imagem original context.drawImage(img,0,0,100,100); Obter dados de imagem imageData = context.getImageData(0,0,img.width,img.height data = imageData.data); for(i=0,len=data.length;i<len;i+=4){ vermelho = dados[i]; i+3]; //Calcular a média da média rgb = Math.floor((vermelho+verde+azul)/3); //Definir o valor da cor data[i] = média data[i+1] = média; ; dados[i+2] = média } imagemData.data = data; //Desenha dados na tela context.putImageData(imageData,0,0)}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.