CanvasRenderingContext2D.arc()

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, рисует дугу  между двумя углами, против часовой стрелки. По умолчанию за часовой стрелкой.

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();

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

<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().

<canvas id="canvas" width="150" height="200"></canvas>

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();
    }
  }
}

Screenshot	Live sample

Specifications

Browser compatibility

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

• The interface defining it, CanvasRenderingContext2D