在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

CanvasRenderingContext2D .arc() 方法在 Canvas 2D API adds a circular arc to the current sub-path.

句法

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

arc() method creates a circular arc centered at (x, y) with a radius of radius . The path starts at startAngle , ends at endAngle , and travels in the direction given by anticlockwise (defaulting to clockwise).

参数

x

The horizontal coordinate of the arc's center.

y

The vertical coordinate of the arc's center.

radius

The arc's radius. Must be positive.

startAngle

The angle at which the arc starts in radians, measured from the positive x-axis.

endAngle

The angle at which the arc ends in radians, measured from the positive x-axis.

anticlockwise 可选

An optional 布尔 。若 true , draws the arc counter-clockwise between the start and end angles. The default is false (clockwise).

范例

Drawing a full circle

This example draws a complete circle with the arc() 方法。

HTML

<canvas></canvas>
					

JavaScript

The arc is given an x-coordinate of 100, a y-coordinate of 75, and a radius of 50. To make a full circle, the arc begins at an angle of 0 radians (0 ° ), and ends at an angle of 2π radians (360 ° ).

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
					

结果

Different shapes demonstrated

This example draws various shapes to show what is possible with arc() .

HTML

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

JavaScript

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// Draw shapes
for (let i = 0; i <= 3; i++) {
  for (let j = 0; j <= 2; j++) {
    ctx.beginPath();
    let x             = 25 + j * 50;                 // x coordinate
    let y             = 25 + i * 50;                 // y coordinate
    let radius        = 20;                          // Arc radius
    let startAngle    = 0;                           // Starting point on circle
    let endAngle      = Math.PI + (Math.PI * j) / 2; // End point on circle
    let 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

规范

规范	状态	注释
HTML 实时标准 The definition of 'CanvasRenderingContext2D.arc' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
arc	Chrome 1	Edge 12	Firefox 1.5	IE 9	Opera 11.6	Safari 3	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 12	Safari iOS 1	Samsung Internet Android 1.0

图例

完整支持

完整支持

另请参阅

• The interface defining this method: CanvasRenderingContext2D
• 使用 CanvasRenderingContext2D.ellipse() to draw an elliptical arc.

元数据

• 最后修改： Oct 9, 2019

相关话题

1. CanvasRenderingContext2D
2. 特性

   1. canvas
   2. currentTransform
   3. direction
   4. fillStyle
   5. filter
   6. font
   7. globalAlpha
   8. globalCompositeOperation
   9. imageSmoothingEnabled
   10. imageSmoothingQuality
   11. lineCap
   12. lineDashOffset
   13. lineJoin
   14. lineWidth
   15. miterLimit
   16. shadowBlur
   17. shadowColor
   18. shadowOffsetX
   19. shadowOffsetY
   20. strokeStyle
   21. textAlign
   22. textBaseline
3. 方法

   1. addHitRegion()
   2. arc()
   3. arcTo()
   4. beginPath()
   5. bezierCurveTo()
   6. clearHitRegions()
   7. clearRect()
   8. clip()
   9. closePath()
   10. createImageData()
   11. createLinearGradient()
   12. createPattern()
   13. createRadialGradient()
   14. drawFocusIfNeeded()
   15. drawImage()
   16. drawWidgetAsOnScreen()
   17. drawWindow()
   18. ellipse()
   19. fill()
   20. fillRect()
   21. fillText()
   22. getImageData()
   23. getLineDash()
   24. getTransform()
   25. isPointInPath()
   26. isPointInStroke()
   27. lineTo()
   28. measureText()
   29. moveTo()
   30. putImageData()
   31. quadraticCurveTo()
   32. rect()
   33. removeHitRegion()
   34. resetTransform()
   35. restore()
   36. rotate()
   37. save()
   38. scale()
   39. scrollPathIntoView()
   40. setLineDash()
   41. setTransform()
   42. stroke()
   43. strokeRect()
   44. strokeText()
   45. transform()
   46. translate()