Plot a curve between two points in canvas
Pergunta
Given a set of points, say (10, 10) and (50, 10), how can I plot a curve between them? My geometry is a bit rusty and I'm not sure of which canvas method to use (arc(), quadradicCurveTo(), etc..).
Can anyone point me in the right direction?
Solução
Well, there's a lot of different options depending on what you want to curve to look like, but this will basically make the two points part of an ellipse
function curveBetweenPoints(startX, startY, endX, endY, ctx){
var cp1 = {
x: startX,
y: ctx.canvas.height - ((ctx.canvas.height - startY) / 2)
};
var cp2 = {
x: startX + ((endX - startX) / 4),
y: ctx.canvas.height
};
var cp3 = {
x: endX - ((endX - startX) / 4),
y: ctx.canvas.height
}
var cp4 = {
x: endX,
y: ctx.canvas.height - ((ctx.canvas.height - endY) / 2)
}
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, (endX - startX) / 2, ctx.canvas.height);
ctx.bezierCurveTo(cp3.x, cp3.y, cp4.x, cp4.y, endX, endY);
ctx.stroke();
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow