时间戳

首页 > 解决方案 > 二次贝塞尔曲线数学

javascript - 二次贝塞尔曲线数学

问题描述

有人可以帮我解决这个问题：当我有这样的贝塞尔曲线时： https ://www.w3schools.com/code/tryit.asp?filename=FX0KJBP2EZ3S

P0(X) = 0 P0(Y) = 50
P1(X) = 100 P1(Y) = 25
P2(X) = 200 P2(Y) = 50

并使贝塞尔曲线更小，如下所示：

https://www.w3schools.com/code/tryit.asp?filename=FX0KL478CRY4

由于距离 P0.X 和 P2.X，P1 较高。如何保持 P1 的高度，使其始终处于相同的高度？

标签： javascriptmath

解决方案

要按比例缩小曲线（使形状相同但更小），您必须以相同的比例更改控制点的差异。所以Y1-Y0应该改成类似(X2'-X0')/(X2-X0): 25 / (200/50) = 6.25。整数：

ctx.quadraticCurveTo(25, 44, 50, 50);

推荐阅读