在JavaScript Canvas中绘制Arc 3鼠标点

Question

我需要绘制一个具有初始，中间和最终点的弧。

我在JavaScript中使用HTML5画布弧功能（x，y，radius，startAngle，endAngle，anticlockwise）

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>