javascript - 在 JavaScript Canvas 中绘制 Arc 3 鼠标点

Question

我需要绘制一条具有初始点、中点和终点的圆弧。

我在 JavaScript 中使用 HTML5 Canvas 圆弧函数(x、y、半径、startAngle、endAngle、逆时针)

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Arcs

我有:

var initial = { x: 20, y: 40 };
var median = { x: 40, y: 33 };
var final = { x: 180, y: 40 };

Answer 1

圆弧命令不会通过这 3 个点绘制您想要的曲线。

相反，使用 context.quadraticCurveTo 绘制通过 3 个点的二次曲线

曲线通过 3 个点的解决方案有无数种。

这是使用该方程的一种解决方案，该方程使用曲线的中值张力 (t=0.50):

var initial = { x: 20, y: 40 };
var median = { x: 40, y: 33 };
var final = { x: 180, y: 40 };

var controlX=2*median.x-initial.x/2-final.x/2;
var controlY=2*median.y-initial.y/2-final.y/2;

这里是示例代码和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var PI2=Math.PI*2;

var initial = { x: 20, y: 40 };
var median = { x: 40, y: 33 };
var final = { x: 180, y: 40 };

var controlX=2*median.x-initial.x/2-final.x/2;
var controlY=2*median.y-initial.y/2-final.y/2;


ctx.beginPath();
ctx.arc(initial.x,initial.y,4,0,PI2);
ctx.closePath();
ctx.moveTo(median.x,median.y);
ctx.arc(median.x,median.y,4,0,PI2);
ctx.closePath();
ctx.moveTo(final.x,final.y);
ctx.arc(final.x,final.y,4,0,PI2);
ctx.closePath();
ctx.fill();

ctx.strokeStyle='red';
ctx.beginPath();
ctx.moveTo(initial.x,initial.y);
ctx.quadraticCurveTo(controlX,controlY,final.x,final.y);
ctx.stroke();

body{ background-color: ivory; }
canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>