В процессе перевода.

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

Синтаксис

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

Параметры

x
X координата центра дуги.
y
Y координата центра дуги.
radius
Радиус.
startAngle
Угол начала дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.
endAngle
Угол завершения дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.
anticlockwise Необязательный
Необязательный Boolean. Задаёт направление рисования дуги.
Если true - по часовой, false - против часовой.

Examples

Using the arc method

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

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

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

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

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></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.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.stroke();</textarea>
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);

Different shapes demonstrated

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

HTML
<canvas id="canvas" width="150" height="200"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Draw shapes
for (i=0;i<4;i++){
  for(j=0;j<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>1){
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}

ScreenshotLive sample

Specifications

Specification Status Comment
HTML Living Standard
Определение 'CanvasRenderingContext2D.arc' в этой спецификации.
Живой стандарт  

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Да) (Да) (Да) (Да) (Да)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Да) (Да) (Да) (Да) (Да) (Да)

Gecko-specific notes

Starting with Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1):

  • The anticlockwise parameter is optional,
  • Specifying a negative radius now throws a IndexSizeError error ("Index or size is negative or greater than the allowed amount").

See also

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, SphinxKnight, hemulslava, stanislavdev1993, GruFFix
Обновлялась последний раз: mdnwebdocs-bot,