用bezierCurveTo绘制带有弧点相对坐标的圆弧

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var x = 100; // 圆心的x坐标
var y = 100; // 圆心的y坐标
var radius = 50; // 圆的半径

ctx.beginPath();
ctx.moveTo(x + radius, y);

// 计算控制点和结束点的坐标
var controlPoint1X = x + radius;
var controlPoint1Y = y - radius;
var controlPoint2X = x + radius;
var controlPoint2Y = y + radius;
var endPointX = x;
var endPointY = y + radius;

// 绘制圆弧
ctx.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, endPointX, endPointY);

ctx.stroke();