无法在 html 画布上绘制贝塞尔曲线答案

【问题标题】：not able to draw Bézier curve on html canvas无法在 html 画布上绘制贝塞尔曲线
【发布时间】：2022-01-28 00:36:58
【问题描述】：

如果 moveTo 和 bezierCurveTo 起点不完全相同，我无法在画布上绘制 bezierCurveTo，即 moveTo 中的 4 个小数点和 bezierCurveTo 中的 6 个小数点和 lineWidth 更多 1

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "4"
ctx.moveTo(33.7605,56.51376);
ctx.bezierCurveTo(33.76049625,56.51376,117.53628,247.02303,742.75229,221.65138);
ctx.stroke();

&lt;canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;"&gt;

【问题讨论】：

标签： javascript html google-chrome canvas html5-canvas

【解决方案1】：

您甚至不需要ctx.moveTo。另外，ctx.lineWidth 应该是一个数字。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 4;
ctx.bezierCurveTo(33.76049625,56.51376,117.53628,247.02303,742.75229,221.65138);
ctx.stroke();

&lt;canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;"&gt;

【讨论】：

【解决方案2】：

贝塞尔曲线的类型

bezierCurveTo() 向路径添加三次贝塞尔曲线。三次贝塞尔曲线有一个起点和终点以及两个控制点（共4个点）

quadraticCurveTo() 向路径添加二次贝塞尔曲线。二次贝塞尔曲线有一个起点和终点以及一个控制点（共3个点）

控制点远离端点

两个贝塞尔曲线的第一个点是添加到当前路径的最后一个点。在起点或终点上添加控制点会导致问题。这可能是由于起点或终点与控制点之间的距离为零，不可能沿零长度的线进行插值。

使用二次曲线（3 点）

由于您只给出了 3 个独特的点，我假设您想要的是二次曲线而不是三次曲线。

因此您可以更改代码

ctx.moveTo(33.7605,56.51376);  // start point
ctx.bezierCurveTo(
    33.76049625, 56.51376, // control point 1 duplicated coordinate (too close)
    117.53628, 247.02303,  // control point 2
    742.75229, 221.65138   // end point
);

并使用quadraticCurveTo，作为...

ctx.moveTo(33.76049625, 56.51376); // start point
ctx.quadraticCurveTo(    
    117.53628, 247.02303,  // control point 1
    742.75229, 221.65138   // end point
);

示例

红色曲线是具有未定义起点的立方。据我所知，没有起点，行为是未定义的。

黑色曲线是代码中 3 个坐标的二次方。

const ctx = myCanvas.getContext("2d");
ctx.lineWidth = 4; ctx.strokeStyle = "Red";
ctx.beginPath();
ctx.bezierCurveTo(
    33.76049625, 56.51376, // control point 1 duplicated coordinate (too close)
    117.53628, 247.02303,  // control point 2
    742.75229, 221.65138);   // end point
ctx.stroke();

ctx.strokeStyle = "Black";
ctx.beginPath();
ctx.moveTo(33.76049625, 56.51376); // start point
ctx.quadraticCurveTo(    
    117.53628, 247.02303,  // control point 1
    742.75229, 221.65138); // end point
ctx.stroke();

&lt;canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;"&gt;

【讨论】：