Canvas HTML - lineTo 和贝塞尔曲线之间的平滑度
Canvas HTML - Smoothness between lineTo and Bezier curve
也许这更像是一道数学题,但让我们看看:
我正在使用 HTML5 Canvas 绘制折线图。
该图表基本上是位置 X 时间。
每条线代表在给定时间 (X) 内处于位置 (Y) 的车辆。
我只有关于车辆何时通过道路上确定点的信息。因此,如果车辆停在两点之间,我没有它实际停止的信息,但是当它经过下一个点时,我将能够画一条几乎水平的线,因为平均速度,即线坡度,会很小。
在这些场景中,我们定义了如果车辆以低于 10Km/h 的速度移动,我应该认为它停止了并且应该画一条水平平滑线。
基本上我要改造这个:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(20, 50);
ctx.lineTo(220, 70);
ctx.lineTo(240, 110);
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
进入这个:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(20, 50);
ctx.bezierCurveTo(
50, 70,
210, 50,
220, 70
)
ctx.lineTo(240, 110);
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
问题是:如何为贝塞尔点选择合适的值?
在上面的示例中,我已经通过实验完成了它。我找不到一种方法来以编程方式选择好的点值,所以我的线条看起来不像这样:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(20, 50);
ctx.bezierCurveTo(
20, 70,
180, 50,
220, 70
)
ctx.lineTo(240, 110);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 80);
ctx.lineTo(20, 100);
ctx.bezierCurveTo(
20, 120,
220, 100,
220, 120
)
ctx.lineTo(280, 150);
ctx.stroke();
<canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
我正在寻找一个计算简单的解决方案,因为每次都会重新绘制很多行,所以我不希望这会降低我的性能。
感谢任何提示!
我找到了解决问题的好方法:使用线插值。
有以下部分并假设我想平滑 B
和 C
之间的东西,我如何选择一些贝塞尔点来保证平滑曲线而不是破碎曲线?
首先,我插入线段 AB
并找到点 B'
,这是线 AB
将触及 C
的 Y 坐标的点。然后我使用相同的过程找到 C'
:
点 B'
和 C'
为贝塞尔曲线提供了很好的点,以便将事物平滑到一条水平线:
这在计算上也足够简单,因为找到线性方程相当简单。
也许这更像是一道数学题,但让我们看看:
我正在使用 HTML5 Canvas 绘制折线图。 该图表基本上是位置 X 时间。 每条线代表在给定时间 (X) 内处于位置 (Y) 的车辆。 我只有关于车辆何时通过道路上确定点的信息。因此,如果车辆停在两点之间,我没有它实际停止的信息,但是当它经过下一个点时,我将能够画一条几乎水平的线,因为平均速度,即线坡度,会很小。
在这些场景中,我们定义了如果车辆以低于 10Km/h 的速度移动,我应该认为它停止了并且应该画一条水平平滑线。
基本上我要改造这个:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(20, 50);
ctx.lineTo(220, 70);
ctx.lineTo(240, 110);
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
进入这个:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(20, 50);
ctx.bezierCurveTo(
50, 70,
210, 50,
220, 70
)
ctx.lineTo(240, 110);
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
问题是:如何为贝塞尔点选择合适的值? 在上面的示例中,我已经通过实验完成了它。我找不到一种方法来以编程方式选择好的点值,所以我的线条看起来不像这样:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(20, 50);
ctx.bezierCurveTo(
20, 70,
180, 50,
220, 70
)
ctx.lineTo(240, 110);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 80);
ctx.lineTo(20, 100);
ctx.bezierCurveTo(
20, 120,
220, 100,
220, 120
)
ctx.lineTo(280, 150);
ctx.stroke();
<canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
我正在寻找一个计算简单的解决方案,因为每次都会重新绘制很多行,所以我不希望这会降低我的性能。
感谢任何提示!
我找到了解决问题的好方法:使用线插值。
有以下部分并假设我想平滑 B
和 C
之间的东西,我如何选择一些贝塞尔点来保证平滑曲线而不是破碎曲线?
首先,我插入线段 AB
并找到点 B'
,这是线 AB
将触及 C
的 Y 坐标的点。然后我使用相同的过程找到 C'
:
点 B'
和 C'
为贝塞尔曲线提供了很好的点,以便将事物平滑到一条水平线:
这在计算上也足够简单,因为找到线性方程相当简单。