在 JavaScript Canvas 中绘制 Arc 3 鼠标点 [关闭]

Question

我需要绘制一条包含初始点、中间点和最终点的弧。

我在 JavaScript 中使用 HTML5 画布圆弧函数（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

arc 命令不会通过 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>