3

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

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

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

4

1 回答 1

3

您可以使用一个简单的插值公式，通过调整 factor 对其进行动画处理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您可以根据长度（演示中未显示）计算 delta 值来解决此问题。

于 2013-09-12T23:34:23.530 回答