在此页

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

CanvasRenderingContext2D .ellipse() method of the Canvas 2D API adds an elliptical arc to the current sub-path.

句法

void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
					

ellipse() method creates an elliptical arc centered at (x, y) with the radii radiusX and radiusY . The path starts at startAngle and ends at endAngle , and travels in the direction given by anticlockwise (defaulting to clockwise).

参数

x

The x-axis (horizontal) coordinate of the ellipse's center.

y

The y-axis (vertical) coordinate of the ellipse's center.

radiusX

The ellipse's major-axis radius. Must be non-negative.

radiusY

The ellipse's minor-axis radius. Must be non-negative.

旋转

The rotation of the ellipse, expressed in radians.

startAngle

The angle at which the ellipse starts, measured clockwise from the positive x-axis and expressed in radians.

endAngle

The angle at which the ellipse ends, measured clockwise from the positive x-axis and expressed in radians.

anticlockwise 可选

An optional 布尔 which, if true , draws the ellipse anticlockwise (counter-clockwise). The default value is false (clockwise).

范例

Drawing a full ellipse

This example draws an ellipse at an angle of π/4 radians (45 ° ). To make a full ellipse, the arc begins at an angle of 0 radians (0 ° ), and ends at an angle of 2π radians (360 ° ).

HTML

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

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Draw the ellipse
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();
// Draw the ellipse's line of reflection
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.stroke();
					

结果

Various elliptical arcs

This example creates three elliptical paths with varying properties.

HTML

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

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.ellipse(60, 75, 50, 30, Math.PI * .25, 0, Math.PI * 1.5);
ctx.fill();
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.ellipse(150, 75, 50, 30, Math.PI * .25, 0, Math.PI);
ctx.fill();
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.ellipse(240, 75, 50, 30, Math.PI * .25, 0, Math.PI, true);
ctx.fill();
					

结果

规范

规范	状态	注释
HTML 实时标准 The definition of 'CanvasRenderingContext2D.ellipse' 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
ellipse	Chrome 31	Edge 13	Firefox 48	IE No	Opera 18	Safari 9	WebView Android 4.4.3	Chrome Android 31	Firefox Android 48	Opera Android 18	Safari iOS 9	Samsung Internet Android 2.0

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

另请参阅

• The interface defining this method: CanvasRenderingContext2D
• 使用 CanvasRenderingContext2D.arc() to draw a circular arc

元数据

• 最后修改： 2019 年 3 月 23 日

相关话题

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