Question

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

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

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

Answer 1

您可以使用简单的插值公式，通过调整因子f来为其设置动画。

公式是（仅显示x）：

x = x1 + (x2 - x1) * f

关于如何实施的一个例子 -

<强> AN ONLINE DEMO

/// 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的增量值，以解决此问题。

在HTML5 Canvas中绘制一条线的等式

1 个答案: