如何正确填充Canvas中两个半椭圆之间的区域实现圆柱效果

问题原因 #

当前填充出现扭曲，是因为Canvas 2D上下文的路径默认是连续拼接的：你先后绘制两个独立半椭圆时，前一个路径的终点会自动和后一个路径的起点相连，导致填充区域的边界不符合预期。

解决方法 #

手动将两个半椭圆的侧边连接，形成完整的闭合路径再填充，即可得到顶部无远侧边的圆柱效果。

修改后的代码如下：

HTML 代码 #

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

JS 代码 #

const canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d");

canvas.width = canvas.height = 300;
ctx.beginPath();
// 绘制上方半椭圆（左到右的上弧，终点落在右侧(300, 0)）
ctx.ellipse(150, 0, 150, 90, 0, 0, Math.PI);
// 连接到下方半椭圆的右端点
ctx.lineTo(300, 200);
// 逆时针绘制下方半椭圆，从右到左走下弧，终点落在左侧(0, 200)
ctx.ellipse(150, 200, 150, 90, 0, Math.PI, 0, true);
// 连接回上方半椭圆的左端点，闭合整个路径
ctx.lineTo(0, 0);

ctx.fillStyle = "lightgreen";
ctx.fill();
ctx.stroke();

代码说明 #

ellipse方法的第8个参数为anticlockwise，设为true后，下方半椭圆会从右向左绘制，刚好和上下两条侧边的路径衔接成完整的闭合区域，填充后就是你需要的圆柱效果。

内容的提问来源于stack exchange，提问作者vanowm