在 HTML5 Canvas 中沿着一条线的方程式绘制

Drawing along an equation of a line in HTML5 Canvas

本文关键字：方程式 绘制 一条 HTML5 Canvas      更新时间：2023-09-26

我在画布上有一条线[从（x1，y1）到（x2，y2）]，就像一把枪。我希望子弹沿线（枪）的方向行进。让子弹也是一条线。我知道从 x1、y1 和 x2、y2 中，我可以找到直线 m 和 y 截距 b 的斜率。我也知道一条线的方程是 y = mx + b。我希望子弹沿着方程 y = mx + b 行进。

我不希望我的子弹看起来像一条长线，从枪的末端一直到画布的边界。我希望它是一条沿着方程 y = mx + b 多次重绘的小线。

有人可以指导我如何绘制子弹的运动吗？提前感谢！

您可以使用一个简单的插值公式，通过调整因子f对其进行动画处理。

公式为（仅针对x显示）：

x = x1 + (x2 - x1) * f

关于如何实施的示例 -

在线演示

/// add click callback for canvas (id = demo)
demo.onclick = function(e) {
    /// get mouse coordinate
    var rect = demo.getBoundingClientRect(),
        /// gun at center bottom
        x1 = demo.width * 0.5,
        y1 = demo.height,
        /// target is where we click on canvas
        x2 = e.clientX - rect.left,
        y2 = e.clientY - rect.top,
        /// factor [0, 1] is where we are at the line
        f = 0,
        /// our bullet
        x, y;
    loop();
}

然后我们为循环提供以下代码

function loop() {
    /// clear previous bullet (for demo)
    ctx.clearRect(x - 2, y - 2, 6, 6);
    /// HERE we calculate the position on the line
    x = x1 + (x2 - x1) * f;
    y = y1 + (y2 - y1) * f;
    /// draw some bullet
    ctx.fillRect(x, y, 3, 3);

    /// increment f until it's 1
    if (f < 1) {
        f += 0.05;
        requestAnimationFrame(loop);
    } else {
        ctx.clearRect(x - 2, y - 2, 6, 6);
    }
}

要绘制沿线的"较长"项目符号，您可以存储 x/y 对的较旧值并在该值和当前值之间绘制一条线，或者不太理想，单独计算位置，甚至计算角度并使用固定长度。

还值得注意的是：线越长，子弹越快。您可以根据长度（演示中未显示）计算f的增量值来解决此问题。

相关文章：