javascript - 如何使用 lineTo() 方法在 Canvas 上绘制旋转的椭圆形?

标签 javascript math canvas formula

我想在 Canvas 上绘制一个旋转的椭圆形,我正在尝试使用 lineTo 方法。

我知道使用这个公式

x位置 = centerX + Math.cos( Angular ) * radiusX; y位置 = centerY + Math.sin( Angular ) * radiusY;

可以画一个椭圆,但我不知道如何添加一些天使作为参数使其旋转,比如绕x轴或y轴或z轴旋转。

最佳答案

要绕其中心旋转椭圆,您可以使用公式:

x = rx * Cos(t) * Cos(fi) - ry * Sin(t) * Sin(fi) + cx
y = rx * Cos(t) * Sin(fi) + ry * Sin(t) * Cos(fi) + cy

要绕 Z 轴(绕坐标原点)旋转,请使用

x = (cx + rx * Cos(t)) * Cos(fi) - (cy + ry * Sin(t)) * Sin(fi)
y = (cx + rx * Cos(t)) * Sin(fi) + (cy + ry * Sin(t)) * Cos(fi)

要绕 Y 轴或 X 轴旋转,请应用旋转的仿射变换,并忽略 Z 坐标(在 OXY 平面上进行投影)

关于javascript - 如何使用 lineTo() 方法在 Canvas 上绘制旋转的椭圆形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41360749/

相关文章:

javascript - 神庙逃亡崩溃

javascript - 如何使用 Bootstrap 创建类似响应式选项卡的导航栏?

javascript - 嵌套折线图未显示

algorithm - Interviewstreet-排列游戏

python - 登录 fft 的结果

javascript - 出现 NaN 错误,无法弄清楚原因

javascript - 检查是否加载了多个图像

javascript - Sequelize : instance. get 不是一个函数

javascript - 按类模拟点击javascript到元素

c# - 保持 Canvas 元素相对于背景图像定位