问题
I have a quadratic curve in canvas (defined by start, end and control point). What I need is to get more of the curve's coordinates (eg. the middle, quarters etc.). With that, I'd be able (after a few iterations of finding coordinates) to animate an object based on this curve (I know it can be done easily with SVG, but that's not an option).
image taken from http://www.html5canvastutorials.com/tutorials/html5-canvas-quadratic-curves/
Is there an easy way to do this? When I checked for bisecting curve on google, the only thing I found was some complicated Math including drawing, which is out of the question.
回答1:
These functions may be of interest to you:
Kinetic.Path.getPointOnCubicBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y)
Kinetic.Path.getPointOnQuadraticBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y)
回答2:
I am seeking a similar solution for bezier curves. How do I get a list of the coordinates on the curve?
To solve your problem, perhaps you could plugin the x-coordinate (or y-coordinate) into the quadratic equation:
y = a*x^2 + b*x + c
I can't seem to find a function that returns the coordinates of the curve. It would be nice to get a list of the coordinates for any curve / shape.
来源：https://stackoverflow.com/questions/12420092/html5-canvas-get-curves-coordinates