<canvas></canvas> é uma tag nova em HTML5, usada para desenhar gráficos. Na verdade, essa tag é igual a outras tags. Sua característica especial é que essa tag pode obter um objeto CanvasRenderingContext2D, que podemos usar scripts JavaScript. para controlar este objeto para desenho.
<canvas></canvas> é apenas um contêiner para desenhar gráficos. Além de atributos como id, classe e estilo, ele também possui atributos de altura e largura. Existem três etapas principais para desenhar no elemento <canvas>> :
<canvas> , que é um objeto Canvas; A seguir está um exemplo simples de desenho <canvas> :
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>demonstração de desenho em tela</title> <style type=text/css> #canvas{ borda: 1px sólido #ADACB0; display: bloco; margem: 20px automático } </style></head><body> <canvas id=canvas width=300 height=300> Seu navegador ainda não suporta canvas </canvas></body><script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); e ponto final context.moveTo(10,10); context.lineTo(200,200); //Definir o estilo context.lineWidth = 2; #F5270B; //Desenhar context.stroke();</script></html>Se não for especificado por meio de moveTo(), o ponto inicial de lineTo() será baseado no ponto anterior. Portanto, se você precisar selecionar novamente o ponto inicial, será necessário passar o método moveTo(). Se precisar definir estilos para diferentes segmentos de linha, você precisará reabrir um caminho por meio de context.beginPath().
<script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); 100.100); contexto.lineTo(700.100); context.lineTo(700.400); #F5270B; //Desenhe context.stroke(); context.beginPath(); context.moveTo(100,200); //O efeito de substituir moveTo por lineTo aqui é o mesmo context.lineTo(600,200); ) ; //Se a cor do strokeStyle tiver um novo valor, ele substituirá o valor definido acima. //Se lineWidth não tiver um novo valor, ele será exibido de acordo com o valor definido acima. context.stroke();</script >
Desenhe retângulos rect(), fillRect() e strokeRect()
<script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); .fillStyle = #3EE4CB; context.strokeStyle = #F5270B; //Use o método fillRect context.fillStyle = #1424DE; context.fillRect(210,10,190,190); //Use o método strokeRect context.strokeStyle = #F5270B; ao mesmo tempo Método context.fillStyle = #1424DE context.strokeStyle = #F5270B; context.strokeRect(610,10,190,190); context.fillRect(610,10,190,190);
Dois pontos precisam ser explicados aqui: O primeiro ponto é a ordem antes e depois de Stroke() e Fill() serem desenhados. Se Fill() for desenhado mais tarde, quando a borda do traço for maior, a borda desenhada por Stroke(). será obviamente abordado. Metade do segundo ponto: Ao definir o atributo fillStyle ou strokeStyle, você pode configurá-lo através do método de configuração de rgba (255,0,0,0.2).
Existe outro relacionado ao desenho retangular: limpar a área retangular: context.clearRect(x,y,width,height).
Os parâmetros recebidos são: a posição inicial do retângulo claro e a largura e comprimento do retângulo.
No código acima, adicione no final do desenho do gráfico:
contexto.clearRect(100,60,600,100);
Os seguintes efeitos podem ser obtidos:
Desenhe uma estrela de cinco pontasAo analisar a estrela de cinco pontas, podemos determinar as regras das coordenadas de cada vértice. Uma coisa a notar aqui é: na tela, a direção do eixo Y é para baixo.
O código correspondente é o seguinte:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Defina as coordenadas de um vértice e formule um caminho baseado no vértice for (var i = 0; i; < 5; i++ ) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200 } context.closePath(); //Definir o estilo da borda e a cor de preenchimento context.lineWidth=3; context.fillStyle = #F6F152;Efeito final:
Propriedades de linhaAlém do atributo lineWidth usado acima, as linhas também possuem os seguintes atributos:
A propriedade lineCap define ou retorna o estilo do limite de linha no final da linha. Pode assumir os seguintes valores:
A propriedade lineJoin define ou retorna o tipo de canto criado quando duas linhas se encontram. Pode assumir os seguintes valores:
A propriedade miterLimit define ou retorna o comprimento máximo da esquadria (o padrão é 10). O comprimento da esquadria refere-se à distância entre os cantos internos e externos onde duas linhas se encontram. miterLimit só é válido quando o atributo lineJoin é mitre.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Teste a propriedade lineCap //Defina a linha de base para fácil observação context.moveTo(10,10); .moveTo(200,10); context.lineTo(200,200); context.lineWidth=1; context.beginPath(); context.moveTo(10,50); context.lineTo(200,50); ;context.moveTo(10.100); context.lineTo(200.100); context.stroke(); //quadrado context.beginPath(); context.lineTo(200,150); propriedade linJoin //miter context.beginPath(); context.lineTo(300,150); context.lineJoin=miter; context.lineWidth=10; context.stroke(); context.lineTo(400,150); context.lineJoin=round; context.lineWidth=10; context.beginPath(); context.moveTo(500,50); context.lineTo(650,100); context.lineTo(500,150); atributo miterLimit context.beginPath(); context.lineTo(850,100); context.lineTo(700,150); context.lineJoin=miter; context.lineWidth=10;
Os efeitos dos diferentes valores para cada atributo são os seguintes:
Estilo de preenchimentoAlém de definir a cor, fillStyle e strokeStyle usados anteriormente também podem definir outros estilos de preenchimento. Aqui tomamos fillStyle como exemplo:
gradiente linearEtapas de uso
(1) var grd = context.createLinearGradient( xstart , ystart, xend , yend ) cria um gradiente linear e define as coordenadas inicial e final;
(2) grd.addColorStop(stop, color) adiciona cor ao gradiente linear, stop é um valor de 0 ~ 1;
(3) context.fillStyle=grd será atribuído ao contexto.
gradiente radialEste método é semelhante ao método do gradiente linear, exceto que os parâmetros recebidos na primeira etapa são diferentes.
var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1); recebe as coordenadas e o raio do centro do círculo inicial e as coordenadas e o raio do centro do círculo final.
Preenchimento de bitmapcreatePattern( img , estilo de repetição) é preenchido com imagens e o estilo de repetição pode ser repetir, repetir-x, repetir-y ou não repetir.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Gradiente linear var grd = context.createLinearGradient(10, 10, 100, 350); grd.addColorStop(0,25,#FC0F31); grd.addColorStop(0.5,#ECF811); grd.addColorStop(0.75,#2F0AF1); grd.addColorStop(1,#160303); grd = context.createRadialGradient(325, 200, 0, 325, 200, 200); grd.addColorStop(0,#1EF9F7); grd.addColorStop(0,25,#FC0F31); ; grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillRect(150,10,350,350); (){var padrão = context.createPattern(bgimg, repetir context.fillStyle = padrão; context.strokeStyle=#F20B0B; context.fillRect(600, 100, 200.200);O efeito é o seguinte:
Transformação gráficaTradução: context.translate(x,y), os parâmetros recebidos são a translação da origem por x na direção do eixo x e a translação de y na direção do eixo y.
Dimensionamento: context.scale(x,y), os parâmetros recebidos são que o eixo da coordenada x é dimensionado de acordo com a proporção x, e o eixo da coordenada y é dimensionado de acordo com a proporção y.
Rotação: context.rotate(angle), o parâmetro recebido é o ângulo de rotação do eixo coordenado.
Ressalta-se que após alterar os gráficos, o próximo desenho seguirá o estado anterior, portanto se precisar retornar ao estado inicial, será necessário utilizar context.save(); e context.restore(); estado atual:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); (0,0,200,200); context.restore(); //escala() context.save(); #F5270B; context.scale(0.5,0.5); context.fillRect(500,50,200,200); context.restore(); .PI / 4); context.fillRect(300,10,200,200);
O efeito é o seguinte:
Outra coisa relacionada à transformação gráfica é: transformação de matriz: context.transform(a, b, c, d, e, f, g). O significado dos parâmetros é o seguinte:
uma escala horizontal (padrão 1)
b inclinação horizontal (padrão 0)
c inclinação vertical (padrão 0)
d escala vertical (padrão 1)
e deslocamento horizontal (o padrão é 0)
f deslocamento vertical (o padrão é 0)
Os leitores podem verificar os efeitos de cada parâmetro por si próprios e não irei apresentá-los um por um aqui.
desenhar curvaExistem quatro funções para desenhar curvas, a saber:
context.arc(x,y,r,sAngle,eAngle,counterclockwise); usado para criar arcos/curvas (usado para criar círculos ou círculos parciais). O significado dos parâmetros recebidos:
Parâmetros | Significado |
| :--- |:---|
| x | x coordenada do centro do círculo |
|y|Coordenada Y do centro do círculo|
|r|raio do círculo|
|sAngle|Ângulo inicial em radianos (a posição das três horas do círculo do arco é 0 graus)|
|eAngle|Ângulo final em radianos|
|sentido anti-horário|Opcional. Especifica se o gráfico deve ser desenhado no sentido anti-horário ou horário. Falso = sentido horário, verdadeiro = sentido anti-horário |
Aqui estão alguns exemplos de várias funções arc():
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); 40 ,0,2*Math.PI); context.stroke(); //Desenhe um semicírculo context.beginPath(); context.arc(200,100,40,0,Math.PI); context.stroke(); //Desenhe um semicírculo, no sentido anti-horário context.beginPath(); ; context.stroke(); //Desenha um semicírculo fechado context.beginPath(); context.arc(400,100,40,0,Math.PI); context.closePath();
O efeito é o seguinte:
context.arcTo(x1,y1,x2,y2,r); Cria um arco/curva na tela entre duas tangentes. O significado dos parâmetros recebidos:
| parâmetro | significado |
|---|---|
| x1 | coordenada x do ponto de controle do arco |
| y1 | A coordenada y do ponto de controle do arco |
| x2 | coordenada x do ponto final do arco |
| y2 | A coordenada y do ponto final do arco |
| R | raio do arco |
O que precisa ser observado aqui é que o ponto inicial da curva desenhada pela função arcTo precisa ser definido por meio da função moveTo(). A função arcTo é usada abaixo para desenhar um retângulo arredondado:
function createRoundRect(context, x1, y1, width, height, radius) { // Move para o canto superior esquerdo context.moveTo(x1 + radius, y1); // Adiciona um segmento de linha conectado ao canto superior direito context.lineTo(x1 + radius, y1); (x1 + largura - raio, y1); //Adicionar um arco context.arcTo(x1 + largura, y1, x1 + largura, y1 + radius, radius); // Adiciona um segmento de linha conectado ao canto inferior direito context.lineTo(x1 + width, y1 + height - radius); // Adiciona um arco context.arcTo(x1 + width, y1 + height, x1); + width - radius, y1 + height , radius); // Adiciona um segmento de linha conectado ao canto inferior esquerdo context.lineTo(x1 + radius, y1 + height); Adicione um arco context.arcTo(x1, y1 + height, x1, y1 + height - radius, radius); // Adicione um segmento de linha conectado ao canto superior esquerdo context.lineTo(x1, y1 + radius); um arco Arco context.arcTo(x1, y1, x1 + radius, y1, radius context.closePath() }); Obtenha o objeto DOM correspondente ao elemento canvas var canvas = document.getElementById('mc'); // Obtenha o objeto CanvasRenderingContext2D desenhado na tela var context = canvas.getContext('2d'); estiloAVC = #F9230B; createRoundRect(contexto, 30, 30, 400, 200, 50);contexto.stroke();O efeito é o seguinte:
context.quadraticCurveTo(cpx,cpy,x,y); Desenhe uma curva de Bézier quadrática. Os significados dos parâmetros são os seguintes:
| parâmetro | significado |
|---|---|
| cpx | A coordenada x do ponto de controle de Bezier |
| cpy | A coordenada y do ponto de controle de Bezier |
| x | coordenada x do ponto final |
| sim | coordenada y do ponto final |
O ponto inicial da curva é o último ponto no caminho atual. Se o caminho não existir, use os métodos BeginPath() e moveTo() para definir o ponto inicial.
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); Desenhe uma curva de Bezier cúbica com os seguintes parâmetros:
| parâmetro | significado |
|---|---|
| cp1x | coordenada x do primeiro ponto de controle de Bezier |
| cp1y | A coordenada y do primeiro ponto de controle de Bezier |
| cp2x | coordenada x do segundo ponto de controle de Bezier |
| cp2y | A coordenada y do segundo ponto de controle de Bezier |
| x | coordenada x do ponto final |
| sim | coordenada y do ponto final |
Existem principalmente três propriedades e três métodos relacionados à renderização de texto:
| propriedade | descrever |
|---|---|
| fonte | Define ou retorna as propriedades de fonte atuais do conteúdo de texto |
| textoAlign | Define ou retorna o alinhamento atual do conteúdo do texto |
| linha de base de texto | Define ou retorna a linha de base do texto atual usada ao desenhar texto |
| método | descrever |
|---|---|
| preencherTexto() | Desenhe texto preenchido na tela |
| acidente vascular cerebralText() | Desenhe texto na tela (sem preenchimento) |
| medirTexto() | Retorna um objeto contendo a largura do texto especificada |
O uso básico das propriedades e métodos acima é o seguinte:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.font=bold 30px Arial; //Definir o estilo context.strokeStyle = #1712F4; 30.100); context.font=negrito 50px Arial; , 200, 400, 300 );//Definir o estilo de preenchimento gradiente grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); , #2F0AF1); grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillText(Bem-vindo ao meu blog!,30,200); .stroke(); #F80707; context.textAlign=left; context.fillText(O texto começa na posição especificada, 200.300); context.textAlign=center; .textAlign= right; context.fillText(o texto termina na posição especificada, 200, 400); context.moveTo(10.500); context.lineTo(500.500); context.fillStyle=#F60D0D; context.font=bold 20px context.textBaseline=top; 10.500);context.textBaseline=fundo; context.fillText (a posição especificada está abaixo, 150.500); context.textBaseline=middle; context.fillText (a posição especificada está no meio, 300.500); #16F643; var text = Bem-vindo ao meu blog! ; context.strokeText(Bem-vindo ao meu blog!,10,600); context.strokeText(A largura da string acima é: +context.measureText(text).width,10,650);
O efeito é o seguinte:
Outras propriedades e métodos Desenho de sombra:Vamos adicionar uma sombra à estrela de cinco pontas que desenhamos anteriormente
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Defina as coordenadas de um vértice e formule um caminho baseado no vértice for (var i = 0; i; < 5; i++ ) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200 } context.closePath(); //Definir o estilo da borda e a cor de preenchimento context.lineWidth=3; context.fillStyle = #F6F152; shadowOffsetY = 30; context.shadowBlur = 2;O efeito é o seguinte:
Combinação gráfica:globalAlpha: Define ou retorna o valor atual de alfa ou transparência do desenho
Este método serve principalmente para definir a transparência dos gráficos, o que não será apresentado em detalhes aqui.
globalCompositeOperation: define ou retorna como a nova imagem é desenhada na imagem existente. Este método possui os seguintes valores de atributos:
| valor | descrever |
|---|---|
| fonte | Exibir imagem de origem sobre imagem de destino (padrão) |
| fonte no topo | Exibe a imagem de origem sobre a imagem de destino. As partes da imagem de origem que ficam fora da imagem de destino são invisíveis |
| fonte | Exiba a imagem de origem dentro da imagem de destino. Somente a parte da imagem de origem dentro da imagem de destino será exibida; a imagem de destino será transparente; |
| fonte | Exibe a imagem de origem além da imagem de destino. Somente a parte da imagem de origem fora da imagem de destino é exibida e a imagem de destino é transparente |
| destino final | Exibir imagem de destino sobre imagem de origem |
| destino no topo | Exibe a imagem de destino sobre a imagem de origem. As partes da imagem alvo que ficam fora da imagem fonte são invisíveis |
| destino em | Exibe a imagem de destino na imagem de origem. Somente a parte da imagem de destino dentro da imagem de origem será exibida e a imagem de origem será transparente |
| destino fora | Exibe a imagem de destino além da imagem de origem. Somente a parte da imagem de destino fora da imagem de origem será exibida e a imagem de origem será transparente |
| isqueiro | Exibir imagem de origem + imagem de destino |
| cópia | Mostrar imagem de origem. Ignorar imagem alvo |
| xor | Combine imagens de origem e destino usando operação XOR |
Aqui está um pequeno exemplo de como a combinação pode ser alterada com um clique:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Combinação gráfica</title> <style type=text/css> #canvas{ borda: exibição sólida de 1px #1C0EFA; : bloco; margem: 20px automático; } #botões{ largura: 1000px; margem: 5px automático; font-size: 18px; display: block; float: left; margin-left: 20px; } </style></head><body> <canvas id=canvas width=1000 height=800> Seu navegador ainda não é compatível canvas </canvas> <div id=buttons> <a href=#>source-over</a> <a href=#>source-atop</a> <a href=#>source-in</a> <a href=#>source-out</a> <a href=#>destination-over</a> <a href=#>destination-atop</a> <a href=#>destination-in</a> <a href=#>destination-out</a> <a href=#>mais claro</a> <a href=#>cópia</a> <a href=#>xor</a> </div></body><script type=text/javascript>window.onload = function(){ draw(source-over); getElementsByTagName(a); for (var i = 0; i < botões.comprimento; i++) { botões[i].onclick = function(){ draw(this.text }); }}; function draw(compositeStyle){ var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.font = negrito 40px Arial; context.textAlign = center; context.textBasedline = middle; context.fillText(globalCompositeOperation = +compositeStyle, canvas.width/2, 60); //desenha um retângulo context.fillStyle = #F6082A; context.fillRect(300, 150, 500, 500); globalCompositeOperation=compositeStyle;context.fillStyle=#1611F5; context.beginPath(); context.moveTo(700, 250); context.lineTo(1000,750); </html>Os leitores podem clicar no rótulo para observar diferentes efeitos de combinação. Os efeitos são os seguintes:
Área de recorte:O método clip() corta qualquer formato e tamanho da tela original.
Dica: Depois de recortar uma área, todos os desenhos subsequentes ficarão restritos à área recortada (nenhuma outra área na tela poderá ser acessada). Você também pode salvar a área atual da tela usando o método save() antes de usar o método clip() e restaurá-la a qualquer momento no futuro (por meio do método restore())
A seguir está um exemplo de uso de um círculo para interceptar um retângulo:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.beginPath(); context.beginPath(); context.fillStyle = #FFFDFD; context.arc(400,400,100,0,2*Math.PI); context.fillRect(200, 350, 400, 50);
Além dos atributos e métodos acima, existem também os seguintes métodos:
drawImage(): desenha uma imagem, tela ou vídeo na tela.
toDataURL(): salva gráficos
isPointInPath(): Retorna verdadeiro se o ponto especificado estiver no caminho atual, caso contrário, retorna falso.
Não vou dar exemplos um por um aqui.
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.