Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
The CanvasRenderingContext2D
.arc()
method of the Canvas 2D API adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
Синтаксис
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
Параметры
x
- The x coordinate of the arc's center.
y
- The y coordinate of the arc's center.
radius
- The arc's radius.
startAngle
- The angle at which the arc starts, measured clockwise from the positive x axis and expressed in radians.
endAngle
- The angle at which the arc ends, measured clockwise from the positive x axis and expressed in radians.
anticlockwise
Необязательный- An optional
Boolean
which, iftrue
, causes the arc to be drawn counter-clockwise between the two angles. By default it is drawn clockwise.
Examples
Using the arc
method
This is just a simple code snippet drawing a circle.
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();
Edit the code below and see your changes update live in the canvas:
Different shapes demonstrated
In this example different shapes are drawn to show what is possible when using arc()
.
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
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard Определение 'CanvasRenderingContext2D.arc' в этой спецификации. |
Живой стандарт |
Browser compatibility
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
- The interface defining it,
CanvasRenderingContext2D