Manual de Referência HTML

大全 de Tags HTML

Método closePath() do canvas HTML

closePath() é o Canvas 2O método D API retorna o ponto de início do subcaminho atual. Ele tenta desenhar uma linha reta do ponto atual ao ponto de partida. Se o gráfico já estiver fechado ou tiver apenas um ponto, esse método não fará nada.

Manual de referência do canvas HTML

Exemplo online

Desenhe um caminho na forma de uma letra L e depois desenhe uma linha até o ponto de partida:

Exemplo

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
Método closePath() do canvas HTML-Tutorial básico(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9e Firefox, Opera, Chrome e Safari suportam closePath() Método.

Atenção:Internet Explorer 8 Versões anteriores não suportam o elemento <canvas>.

Definição e uso

O método closePath() cria um caminho de ponto atual para o ponto de partida.

Dica:Use stroke()Método para desenhar uma trilha no canvas.

Dica:Use fill() Método para preencher uma imagem (padrão é preto). Use fillStyle Atributo para preencher outra cor/Gradiente.

Sintaxe JavaScript:	context.closePath();

Exemplo online

Use azul como cor de preenchimento:

Exemplo

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
Método closePath() do canvas HTML-Tutorial básico(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="blue";
ctx.fill();
</script>
</body>
</html>

Teste e veja ‹/›

Manual de referência do canvas HTML

HTML: <template> etiqueta