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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: CanvasRenderingContext2D.arcTo()
slug: Web/API/CanvasRenderingContext2D/arcTo
translation_of: Web/API/CanvasRenderingContext2D/arcTo
---
<div>{{APIRef}}</div>
<p> </p>
<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arcTo()</code></strong> da API 2D do Canvas adiciona um arco ao caminho quando fornecemos seus pontos de controle e raio.</p>
<p>O arco será parte de um círculo, nunca de uma elipse. Frequentemente é usado para fazer cantos arredoondados.</p>
<p>Pode-se imaginar o arco como dois segmentos de reta, partindo de um ponto inicial (ponto mais recente definido no caminho) até o primeiro ponto de controle e, em seguida, do primeiro ponto de controle até o segundo ponto de controle. Esses dois segmentos de reta formam um angulo, com o primeiro ponto de controle sendo a curva. Usando arcTo, o ângulo será formado de acordo com o raio fornecido.</p>
<p>O arco é tangencial ao dois segmentos de reta, e por vezes, pode produzir resultados inesperados se, por exemplo, o raio fornecido for maior que a distância entre o ponto inicial e o primeiro ponto de controle.</p>
<p>Se o raio fornecido não atingir o ponto inicial (ponto mais recente definido no caminho), o ponto inicial é conectado ao arco por um segmento de reta.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">void <var><em>ctx</em>.arcTo(x1, y1, x2, y2, radius);</var>
</pre>
<h3 id="Parâmetros">Parâmetros</h3>
<dl>
<dt><code>x1</code></dt>
<dd>coordenada do eixo x para o primeiro ponto de controle.</dd>
<dt><code>y1</code></dt>
<dd>coordenada do eixo y para o primeiro ponto de controle.</dd>
<dt><code>x2</code></dt>
<dd>coordenada do eixo x para o segundo ponto de controle.</dd>
<dt><code>y2</code></dt>
<dd>coordenada do eixo y para o segundo ponto de controle.</dd>
<dt><code>radius</code></dt>
<dd>O raio do arco.</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Using_the_arc_method" name="Using_the_arc_method">Usando o método <code>arcTo</code> </h3>
<p>Esse é um trecho simples de código que desenha um arco. O ponto de partida é azul e os pontos de controls são vermelhos.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.arcTo(150, 100, 50, 20, 30);
ctx.lineTo(50, 20)
ctx.stroke();
ctx.fillStyle = 'blue';
// starting point
ctx.fillRect(150, 20, 10, 10);
ctx.fillStyle = 'red';
// control point one
ctx.fillRect(150, 100, 10, 10);
// control point two
ctx.fillRect(50, 20, 10, 10);
</pre>
<p>{{ EmbedLiveSample('Using_the_arc_method', 315, 165) }}</p>
<h3 id="Trying_the_arcTo_parameters" name="Trying_the_arcTo_parameters">Treinando os parâmetros do <code>arcTo</code> </h3>
<p>Altere o código abaixo e veja suas alterações atualizadas na tela:</p>
<div style="display: none;">
<pre class="brush: html"><canvas id="canvas" class="playable-canvas" height="200" width="400"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.arcTo(150,100,50,100,20);
ctx.stroke();</textarea>
</pre>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
</pre>
</div>
<p>{{ EmbedLiveSample('Trying_the_arcTo_parameters', 700, 360) }}</p>
<h2 id="Espeficicações">Espeficicações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade">Compatibilidade</h2>
<div class="hidden">A tabela de compatibilidade desta página é gerada a partir de dados estruturados. Caso queira contribuir, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um pull request.</div>
<p>{{Compat("api.CanvasRenderingContext2D.arcTo")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
</ul>
|
