Javascript 如何使用HTML5画布绘制镜头横截面？

我想画一个透镜元件的横截面。它们通常由1或2个圆形表面（正面和背面）和任意形状的边缘组成。出于我的目的，我只想画一两条线来连接正面和背面

下面是我所说的一个例子：

这张图片中的每个元素都由两个（可能）圆弧组成，两条到六条直线连接起来。（我还不担心画非球面透镜元件）

我最初的想法是绘制具有适当弧长的弧，然后绘制连接线。我对这种方法的担忧是，圆弧和直线可能不匹配，并且由于精度误差，可能存在重叠或间隙

---

有没有更好的方法来解决这个问题？我可以画包括直边和曲边的多边形吗？

在画了一堆圆的图片，做了一些数学运算，然后在上面睡觉之后，我想出了以下解决方案：

//draw the top and bottom edges of the lens    
ctx.beginPath();
ctx.moveTo(lens.x - (lens.thickness / 2), lens.y - lens.radius);
ctx.lineTo(lens.x + (lens.thickness / 2), lens.y - lens.radius);
ctx.moveTo(lens.x - (lens.thickness / 2), lens.y + lens.radius);
ctx.lineTo(lens.x + (lens.thickness / 2), lens.y + lens.radius);
ctx.stroke();


ctx.beginPath();
//draw the left face of the lens
var lensToCircleRatio = lens.radius / lens.leftRadius;
var xOffset = lens.leftRadius * Math.cos(Math.asin(lensToCircleRatio)) - (lens.thickness / 2);  //change the - to a + for a right-side concave face
var arcStart = Math.PI - Math.asin(lensToCircleRatio);
var arcEnd = Math.PI + Math.asin(lensToCircleRatio);
ctx.arc(lens.x + xOffset, lens.y, lens.leftRadius, arcStart, arcEnd);
ctx.stroke();


ctx.beginPath();
//draw the right face of the lens
lensToCircleRatio = lens.radius / lens.rightRadius;
xOffset = lens.rightRadius * Math.cos(Math.asin(lensToCircleRatio)) - (lens.thickness / 2);     //change the - to a + for a left-side concave face
arcStart = -1 * Math.asin(lensToCircleRatio);
arcEnd = Math.asin(lensToCircleRatio);
ctx.arc(lens.x - xOffset, lens.y, lens.rightRadius, arcStart, arcEnd);
ctx.stroke();

这是一个与此代码所实现的非常相似的图像：

它根据每个面的曲率半径计算出每个面的弧长，然后计算出这些弧的中心位置。然后绘制圆弧和边，以便在需要时连接它们。我的代码为这个模型增加了额外的透镜厚度，如果透镜的两面都是凸的。幸运的是，我认为通过这种方法可能会出现的精度问题还没有出现，即使在许多不同尺寸和镜头配置之后

下面是一个早期测试（使用稍微更新的代码绘制）：