Circles in HTML Canvas

实例

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

亲自试一试

画圆

要在画布上绘制圆形，请使用以下方法：

• beginPath() - 开始路径
• arc(x,y,r,start,end) - 定义圆
• stroke() - 绘制

arc(x,y,r,start,end) - 创建弧（曲线）。

要创建圆，请将起始角度设置为 0，结束角度设置为 2 * Math.PI。

x 和 y 参数定义圆心的坐标。

r parameter defines the radius of the circle.

See also:

Complete Canvas Reference Manual of CodeW3C.com