path: root/files/ru/web/api/canvasrenderingcontext2d/arc/index.html

---
title: CanvasRenderingContext2D.arc()
slug: Web/API/CanvasRenderingContext2D/arc
tags:
  - API
  - Рисование
  - Рисование в 2d
  - Функция
  - Холст
  - метод
translation_of: Web/API/CanvasRenderingContext2D/arc
---
<div>{{APIRef}}</div>

<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> метод Canvas 2D API добавляет дугу к пути с центром <em>(x, y)</em> и с радиусом <em>r</em>  с началом в <em>startAngle</em> и с концом <em>endAngle</em> и с направлением против часовой стрелки (по умолчанию по часовой стрелке).</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, radius, startAngle, endAngle, anticlockwise);</var>
</pre>

<h3 id="Параметры">Параметры</h3>

<dl>
 <dt><code>x</code></dt>
 <dd>X координата центра дуги.</dd>
 <dt><code>y</code></dt>
 <dd>Y координата центра дуги.</dd>
 <dt><code>radius</code></dt>
 <dd>Радиус.</dd>
 <dt><code>startAngle</code></dt>
 <dd>Угол начала дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.</dd>
 <dt><code>endAngle</code></dt>
 <dd>Угол завершения дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.</dd>
 <dt><code>anticlockwise</code> {{optional_inline}}</dt>
 <dd>Необязательный {{jsxref("Boolean")}}. Задаёт направление рисования дуги.<br>
 Если <code>true</code> - против часовой, <code>false</code> - по часовой.</dd>
</dl>

<h2 id="Примеры">Примеры</h2>

<h3 id="Using_the_arc_method" name="Using_the_arc_method">Использование метода <code>arc</code></h3>

<p>Ниже приведен пример простого кода который рисует круг.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</pre>

<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени (убедитесь, что вы используете браузер, поддерживающий данное свойство - смотрите таблицу совместимости):</p>

<div class="hidden">
<h6 id="Playable_code" name="Playable_code">Playable code</h6>

<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
&lt;div class="playable-buttons"&gt;
  &lt;input id="edit" type="button" value="Edit" /&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
&lt;/div&gt;
&lt;textarea id="code" class="playable-code"&gt;
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.stroke();&lt;/textarea&gt;
</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('Playable_code', 700, 360) }}</p>

<h3 id="Different_shapes_demonstrated" name="Different_shapes_demonstrated">Демонстрация разных форм дуг</h3>

<p>В этом примере нарисованные разные формы чтобы показать возможности метода <code>arc()</code>.</p>

<div class="hidden">
<h6 id="HTML_2">HTML</h6>

<pre class="brush: html">&lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
</pre>

<h6 id="JavaScript_2">JavaScript</h6>
</div>

<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Draw shapes
for (i=0;i&lt;4;i++){
  for(j=0;j&lt;3;j++){
    ctx.beginPath();
    var x              = 25+j*50;               // x coordinate
    var y              = 25+i*50;               // y coordinate
    var radius         = 20;                    // Arc radius
    var startAngle     = 0;                     // Starting point on circle
    var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle
    var anticlockwise  = i%2==1;                // Draw anticlockwise

    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);

    if (i&gt;1){
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}</pre>

<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Коментарий</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Примечания_относительно_Gecko">Примечания относительно Gecko</h2>

<p>Начиная с Gecko 2.0 {{geckoRelease("2.0")}}:</p>

<ul>
 <li><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Параметр </span></font><code>anticlockwise</code> опциональный,</li>
 <li>Указывание отрицательного радиуса теперь приводит к ошибке {{domxref("DOMError", "IndexSizeError")}} error ("Index or size is negative or greater than the allowed amount").</li>
</ul>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Интерфейс <code>Canvas</code>, {{domxref("CanvasRenderingContext2D")}}</li>
</ul>