English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Tutorial Básico

HTML5 API

HTML5 Mídia

HTML5 Gráficos

HTML5 O caminho do canvas

HTML5 O caminho do canvas é usado no HTML5Desenhar vários tipos de formas (linhas, círculos, polígonos, etc.) no canvas, o caminho é usado no HTML5Desenhar vários tipos de formas no canvas

HTML5 O caminho do canvas é uma série de pontos, entre os quais há instruções de desenho. Por exemplo, uma série de pontos pode ter uma linha entre eles, ou podem haver arcos.

O caminho é usado no HTML5Desenhar vários tipos de formas (linhas, círculos, polígonos, etc.) no canvas é importante para entender esse conceito central.

começar e terminar o caminho - Caminho

Usando2O contexto superior função beginPath() e pode começar e terminar o caminho.closePath(), conforme mostrado a seguir:

var canvas = document.getElementById("ex1;
");2var context = canvas.getContext("
//　d");context.beginPath();
context.closePath();

... operações de desenho de caminho

moveTo()2Ao usar o desenho de caminho, você usa um 'pincel' virtual ou 'ponteiro'. O ponteiro virtual sempre está em algum ponto. Usando

context.moveTo(10,10);

A função Context move o ponteiro virtual para o ponto moveTo(x, y), conforme mostrado a seguir:10,10.

função lineTo()

Este exemplo move o ponteiro para o ponto

context.beginPath();
context.moveTo(10,10);
context.lineTo(50,50);
context.closePath();

A função lineTo() desenha uma linha do ponto da posição do ponteiro virtual até o ponto passado como parâmetro para a função lineTo(). Este é um exemplo:10,10Este exemplo move o ponteiro para o ponto5, e então desenha uma linha daquele ponto até o ponto50,

0.50,5lineTo() também move o ponteiro virtual para o final da linha. Portanto, no exemplo acima, o ponteiro se move para

0, enquanto indica ao canvas para desenhar uma linha até esse ponto. + stroke()

fill()2no seu comando2O contexto superior stroke() ou fill() não desenha nenhum caminho antes de desenhar o caminho. Chamando2A operação é concluída no contexto superior.
A função stroke() desenhará a contorno da forma definida pelas operações de caminho.
A função fill() preencherá a forma definida pelas operações de caminho.
Este é um exemplo dos dois, stroke() e fill() aplicados à mesma forma:

<canvas id="ex1" width="500" height="75" style="border:　1px sólido #cccccc;">
HTML5　Canvas não suportado
</canvas>
<script>
var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();</script>
Teste e veja ‹/›

Este é o resultado da execução do código acima:

HTML5 Canvas não suportado

LineWidth

Você pode usar lineWidth 2A propriedade de contexto define os diferentes traços de função e a largura das linhas desenhadas. Este é um exemplo:

context.lineWidth =　10;

上面的示例将所有后续笔画绘制操作的线宽设置为10Os exemplos acima configuram a largura da linha para todas as operações subsequentes de desenho de traços.
pixels.1,5e10Essas três linhas têm larguras diferentes de

HTML5 Canvas não suportado

:1Quando a largura da linha for maior do que10,10até100,10Desenha uma linha com largura de10, então a linha realmente será10,5Começa e se estende até10,15, e então se estende horizontalmente até100,5e100,15Daí. Como um retângulo.

LineCap

Quando se desenha uma linha usando um caminho, pode-se configurar o lineCap da linha. O lineCap define como o final da linha é desenhado.
A largura da linha é definida pelo lineCap2A propriedade lineJoin do contexto D pode ser configurada para os seguintes valores:

  • butt

  • round

  • square

O valor butt faz com que o final da linha seja plano e perpendicular à linha.
O valor round produz um final de linha arredondado, com o raio da curva igual à metade da largura da linha.
O valor square faz com que se desenhe um retângulo no final da linha, com o tamanho de largura x largura da linha. / 2.
Aqui está um conjunto de exemplos que ilustram o lineCap. A largura de todas as linhas é10. A linha mais à esquerda usa o valor lineCap butt. A linha central usa o valor lineCap round. A linha mais à direita usa o valor lineCap square

HTML5 Canvas não suportado

Os valores butt e square de lineCap podem ser um pouco difíceis de ver a diferença entre eles na linha. Portanto, criei alguns exemplos de linhas usando butt e square, que são desenhadas próximas umas das outras para que você possa ver a diferença. No topo ou na esquerda use butt, na parte inferior ou na direita use square.

HTML5 Canvas não suportado

Como você pode ver, a linha square com valor lineCap desenha um retângulo extra no final, o que faz a linha parecer um pouco maior.

Conexão de linha (lineJoin)

lineJoin 2A propriedade lineJoin define como os pontos de conexão entre duas linhas são desenhados no contexto D. O ponto de conexão entre duas linhas é chamado de "conexão de linha". A propriedade lineJoin pode ter os seguintes valores:

  • miter

  • bevel

  • round

Aqui estão três exemplos de código para configurar a conexão de linha:

context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";

O valor do resultado miter faz com que se desenhem cantos retos nas conexões de linha.
O valor do resultado bevel faz com que se desenhem cantos retos nas conexões de linha.
O valor do resultado round faz com que se desenhem cantos arredondados nas conexões de linha.
Aqui estão três exemplos (começando da esquerda) miter, bevel e round, usados como valores da propriedade lineJoin.

HTML5 Canvas não suportado

arc()

2A função arc() do contexto D desenha arcos no canvas.

A função arc() utiliza6parâmetros:

  • x: Coordenada x do ponto central do arco

  • y: Coordenada y do ponto central do arco

  • radius: Raio do arco

  • startAngle: Ângulo de radianos do início do arco

  • endAngle: Ângulo de radianos do final do arco

  • anticlockwise: Define se a direção de inserção é anti-horária (não horária).

Este é um exemplo de código:

context.lineWidth =　3;
var x =　50;
var y =　50;
var radius =　25;
var startAngle = (Math.PI　/　180)　*　45;
var endAngle = (Math.PI　/　180)　*　90;
var anticlockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.stroke();
context.closePath();

Este exemplo de código desenha um arco com o centro de50,50, com raio de25pixels, a partir de45graus, se estende até180 graus. Você pode ter notado que, a partir de 0 até36O 0 graus será convertido para radianos.
Aqui está a aparência do exemplo de código desenhado na tela:

HTML5 Canvas não suportado

Este é o mesmo exemplo de código, mas com anticlockwise configurado para true:

HTML5 Canvas não suportado

Para desenhar um círculo completo, configure simplesmente startAngle para 0 e endAngle para2 * Math.PI é igual a (Math.PI / 180) * 360

arcTo()

2O contexto D tem umarcTo()mas pode usarfunção lineTo()epara imitar sua funçãoarc()Portanto, vou pular isso

quadraticCurveTo()

A função quadraticCurveTo() desenha uma curva de Bezier quadrática de um ponto para outro. A curva é controlada por um único ponto de controle. Este é um exemplo de código:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　100;
var toY =　50;
var cpX =　75;
var cpY =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.quadraticCurveTo(cpX, cpY, toX, toY);
context.stroke();
context.closePath();

Este exemplo de código usa pontos de controle75,100 (cpX, cpY) desenha uma linha de50,5De 0 até100,5A curva de 0. O resultado da curva é conforme mostrado a seguir:

HTML5 Canvas não suportado

Os pequenos pontos na tela são os pontos de controle que eu desenhei aqui. Eles geralmente não fazem parte da curva.

bezierCurveTo()

A função bezierCurveTo() desenha uma curva de Bezier cúbica de um ponto para outro. A curva de Bezier cúbica tem2pontos de controle, enquanto a curva de Bezier quadrática possui apenas1pontos de controle. Este é um exemplo de código:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　300;
var toY =　50;
var cp1X =　100;
var cp1Y =　100;
var cp2X =　250;
var cp2Y =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

Este exemplo de código usa pontos de controle100,100 (cp1X, cp1Y) e250,100 (cp2X, cp2Y) desenha a partir de50,5De 0 até300,5A curva de 0. O resultado da curva é conforme mostrado a seguir:

HTML5 Canvas não suportado

Os dois pequenos pontos na tela são os pontos de controle que eu desenhei, usados para mostrar a sua posição. Eles não são desenhados como parte da curva.
Este é um exemplo que usa diferentes pontos de partida, fim e controle:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　300;
var toY =　50;
var cp1X =　100;
var cp1Y =　10;
var cp2X =　250;
var cp2Y =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

Esta é a curva correspondente:

HTML5 Canvas não suportado


Da mesma forma, dois pontos são pontos de controle de renderização claros

HTML5 Gradiente no CanvasHTML5 Limpar o Canvas