1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
---
title: Path2D
slug: Web/API/Path2D
tags:
- Canvas
- Compatibilidade
- Interface
- JavaScript
- Métodos
- Pacote 2D
- Path2D
- Referencia
translation_of: Web/API/Path2D
---
<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
<p>A <strong><code>Path2D</code></strong> interface da API Canvas 2D é usada para declarar caminhos que são usados posteriormente em objetos {{domxref("CanvasRenderingContext2D")}}. Os métodos de caminho da interface CanvasRenderingContext2D também estão presentes nessa interface e permitem criar caminhos que você pode reter e reproduzir conforme necessário em uma tela.</p>
<h2 id="Construtores">Construtores</h2>
<dl>
<dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
<dd><code>Path2D</code> construtor. Cria um novo objeto <code>Path2D</code>.</dd>
</dl>
<h2 id="Metodos">Metodos</h2>
<dl>
<dt>{{domxref("Path2D.addPath()")}}</dt>
<dd>Adiciona um caminho ao caminho atual.</dd>
<dt>{{domxref("CanvasRenderingContext2D.closePath", "Path2D.closePath()")}}</dt>
<dd>Faz com que o ponto da caneta retorne ao início do sub-caminho atual. Ele tenta desenhar uma linha reta desde o ponto atual até o início. Se a forma já foi fechada ou tem apenas um ponto, essa função não faz nada.</dd>
<dt>{{domxref("CanvasRenderingContext2D.moveTo()", "Path2D.moveTo()")}}</dt>
<dd>Move o ponto inicial de um novo subcaminho para as coordenadas (x, y).</dd>
<dt>{{domxref("CanvasRenderingContext2D.lineTo()", "Path2D.lineTo()")}}</dt>
<dd>Conecta o último ponto no subcaminho às coordenadas x, y com uma linha reta.</dd>
<dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()", "Path2D.bezierCurveTo()")}}</dt>
<dd>Adiciona uma curva cúbica de Bézier ao caminho. Requer três pontos. Os dois primeiros pontos são pontos de controle e o terceiro é o ponto final. O ponto de partida é o último ponto no caminho atual, que pode ser alterado usando moveTo () antes de criar a curva Bézier.</dd>
<dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()", "Path2D.quadraticCurveTo()")}}</dt>
<dd>Adiciona uma curva quadrática de Bézier ao caminho atual.</dd>
<dt>{{domxref("CanvasRenderingContext2D.arc()", "Path2D.arc()")}}</dt>
<dd>Adiciona um arco ao caminho que é centralizado na posição (x, y) com raio r iniciando em startAngle e terminando em endAngle indo na direção dada no sentido anti-horário (padrão no sentido horário).</dd>
<dt>{{domxref("CanvasRenderingContext2D.arcTo()", "Path2D.arcTo()")}}</dt>
<dd>Adiciona um arco ao caminho com os pontos de controle e raio dados, conectados ao ponto anterior por uma linha reta.</dd>
<dt>{{domxref("CanvasRenderingContext2D.ellipse()", "Path2D.ellipse()")}}</dt>
<dd>Adiciona uma elipse ao caminho que é centralizado na posição (x, y) com os raios radiusX e radiusY começando em startAngle e terminando em endAngle indo na direção determinada no sentido anti-horário (padrão no sentido horário).</dd>
<dt>{{domxref("CanvasRenderingContext2D.rect()", "Path2D.rect()")}}</dt>
<dd>Cria um caminho para um retângulo na posição (x, y) com um tamanho determinado por <em>width</em> e <em>height</em>.</dd>
</dl>
<h2 id="Specifications" name="Specifications">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-path2d", "Path2D")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_com_o_Navegador">Compatibilidade com o Navegador</h2>
<div>
<p>{{Compat("api.Path2D")}}</p>
</div>
<h2 id="Veja_também">Veja também:</h2>
<ul>
<li>{{domxref("CanvasRenderingContext2D")}}</li>
</ul>
|
