HTML5 Canvas中如何计算椭圆路径上点的坐标并绘制点位

实现原理 #

你当前绘制圆形路径点位的逻辑，本质是调用了正圆的参数方程：正圆水平、垂直方向半径相等，因此x、y坐标计算时乘的是同一个半径值distance。
椭圆有标准参数方程，直接通过数学计算就能得到路径上的点位坐标，不需要调用ctx.scale()缩放画布，完全不会造成绘制元素变形：
对于中心坐标为(centerX, centerY)、水平半轴长为radiusX、垂直半轴长为radiusY的无旋转椭圆，角度θ（弧度制）对应的路径点坐标为：

• x坐标：centerX + radiusX * Math.cos(θ)
• y坐标：centerY + radiusY * Math.sin(θ)

实现代码 #

只需要把原有代码里单一的半径变量distance拆成水平、垂直两个独立的半轴参数，代入坐标计算即可：

const canvas = document.getElementById('thumbCanvas');
const ctx = canvas.getContext('2d');
// 椭圆水平方向半轴长度
const radiusX = 200;
// 椭圆垂直方向半轴长度，和radiusX设为不同值即可生成椭圆
const radiusY = 120;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
// 路径上绘制的标记点尺寸
const pointSize = 5;
let angle = 0;
for(let i = 0; i < 36; i++) {
  const angleInRadian = angle * Math.PI / 180;
  const posX = centerX - pointSize / 2 + radiusX * Math.cos(angleInRadian);
  const posY = centerY - pointSize / 2 + radiusY * Math.sin(angleInRadian);
  ctx.fillRect(posX, posY, pointSize, pointSize);
  angle += 10;
}

补充说明 #

• 当radiusX和radiusY数值相等时，计算逻辑和原有正圆绘制逻辑完全一致，生成正圆路径
• 调整两个半径的差值即可控制椭圆的扁平程度
• 如果需要绘制旋转后的椭圆路径，在坐标计算时加入旋转角度的三角函数偏移即可，不需要修改画布变换状态
• 原有正圆实现效果参考：
  

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