HTML5 Canvas
<canvas> gráficos tag personalizados, tais como gráficos e outras imagens, você deve usar um script para desenhar gráficos.
Na tela (tela) desenhar um retângulo vermelho, retângulo gradiente, retângulos coloridos e algum texto colorido.
O que é Canvas?
HTML5 elemento <canvas> é usado para desenhar gráficos usando scripts (normalmente JavaScript) para completar.
tag <canvas> é um recipiente gráfica, você deve usar um script para desenhar gráficos.
Você pode usar Canva desenhar caminhos, caixas, círculos, personagens e adicionar imagens através de uma variedade de métodos.
Suporte a navegadores
Internet Explorer 9 +, Firefox, Opera, Chrome, Safari e apoio elemento <canvas>.
Nota: O Internet Explorer 8e versões anteriores do navegador IE não suportar elemento <canvas>.
Criar uma tela (tela)
A página de tela é um retângulo é desenhado através do elemento <canvas>.
Nota: Por padrão, o elemento <canvas> não tem fronteiras e conteúdo.
<Canvas> Exemplos simples são os seguintes:
Nota: A etiqueta normalmente é necessário especificar um atributo id (o script frequentemente citado), tamanho, largura e altura atributos definem a tela.
Dica: Você pode usar vários <canvas> elemento em uma página HTML.
Usando o atributo de estilo para adicionar uma borda:
Exemplos
style="border:1px solid #000000;">
</canvas>
tente »
Use JavaScript para desenhar gráficos
elemento de tela em si não está consumindo energia. Todo o trabalho deve ser desenhado em JavaScript feito internamente:
Exemplos
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
tente »
exemplos de análise:
Em primeiro lugar, encontrar o elemento <canvas>:
Em seguida, crie o objeto de contexto:
getContext ( "2d") objeto é um built-in HTML5 objeto tem vários métodos para os caminhos de desenho, caixas, círculos, personagens e adicionar imagens.
As duas linhas de código a seguir para desenhar um retângulo vermelho:
ctx.fillRect(0,0,150,75);
Definir fillStyle propriedade pode ser uma cor CSS, gradiente ou padrão. configuração padrão fillStyle é # 000000 (preto).
fillRect (x, y, largura,altura) método define um rectângulo preenchido com o método corrente.
coordenadas de lona
lona é uma grelha bidimensional.
tela superior coordenadas canto esquerdo (0,0)
O método acima tem parâmetros fillRect (0,0,150,75).
Isto significa: Desenhe um retângulo 150x75 na tela a partir do canto superior esquerdo (0,0).
Exemplos de coordenadas
Como mostrado abaixo, as coordenadas X e Y da tela sobre a tela para o posicionamento pintura. O movimento do retângulo rato, local de exibição coordenadas.
Canvas - Caminho
Na linha de pintura em tela, vamos usar dois métodos a seguir:
- moveTo(x, y) coordenadas definir uma linha que começa
- lineTo(x, y) coordenadas para definir o fim da linha
Desenhar uma linha que deve usar os métodos "tinta", como acidente vascular cerebral ().
Exemplos
Definir iniciar coordenadas (0,0), e as coordenadas finais (200, 100) e, em seguida, usar o método de acidente vascular cerebral () para desenhar a linha:
JavaScript:
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
tente »
Desenhar um círculo na tela, vamos usar o seguinte método:
- arco (x, y, r, iniciar, parar)
Na verdade, foi utilizada a abordagem de "tinta" ao desenhar um círculo, como acidente vascular cerebral () ou preencher ().
Exemplos
Use arc () para desenhar um círculo:
JavaScript:
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
tente »
Canvas - Texto
Use tela para desenhar texto, propriedades e métodos importantes como segue:
- font - definir o tipo de letra
- fillText (texto, x, y)- Desenha um sólido texto sobre tela
- strokeText (texto, x, y)- desenho sobre tela texto oco
Use fillText ():
Exemplos
Usar fonte "Arial" rendering um texto de alta 30px (sólido) na tela:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
tente »
Use strokeText ():
Exemplos
Usar fonte "Arial" rendering um texto de alta 30px (oca) na lona:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
tente »
Canvas - Gradient
Gradiente pode ser preenchido em retângulos, círculos, linhas, texto, etc., várias formas pode definir cores diferentes.
Aqui estão duas maneiras diferentes de configurar Canvas Gradiente:
- createLinearGradient (x, y, x1,y1) - Criar um gradiente de linha
- createRadialGradient (x, y, r,x1, y1, r1) - Criar um radial / round-graduada
Quando usamos um objeto gradiente, você deve usar duas ou mais cores stop.
addColorStop () método para especificar limites de cor, utilização coordenadas para descrever os parâmetros que podem ser 0-1.
Usando a configuração fillStyle ou gradiente valor strokeStyle Gradiente, e, em seguida, desenhar formas, como retângulos, texto ou uma linha.
Use createLinearGradient ():
Exemplos
Criar um gradiente linear. Use retângulo preenchimento de gradiente:
JavaScript:
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
tente »
Use createRadialGradient ():
Exemplos
Criar um gradiente radial / circular. Utilize o retângulo de preenchimento gradiente:
JavaScript:
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
tente »
Tela - Imagens
A imagem de um para a tela, usando os seguintes métodos:
- drawImage(imagem, x, y)
Usar uma imagem:
Exemplos
A imagem é colocada sobre uma tela:
JavaScript:
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
tente »
Manual HTML Canvas Referência
propriedade completa do rótulo pode consultar o manual de referência da lona.
O HTML <canvas> Tag
| Tag | 描述 |
|---|---|
| <canvas> | HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 |