Html5---疯狂的大炮

最新推荐文章于 2021-06-21 20:06:59 发布

原创最新推荐文章于 2021-06-21 20:06:59 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

HTML5实验室---Canvas世界专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用Canvas实现平抛运动，并通过模拟大炮发射炮弹来展示动态效果。平抛运动被分解为水平匀速直线运动和垂直自由落体运动的组合，而大炮模拟则通过生成随机炮弹并追踪它们的轨迹来实现视觉冲击力强的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平抛出的物体的运动是平抛运动，与水平有一定仰角抛出的物体的运动是斜抛运动，这两种运动都是曲线运动，统称抛物运动。

平抛运动：

物体以一定的初速度沿水平方向抛出，如果物体仅受重力作用，这样的运动叫做平抛运动。平抛运动可视为水平方向的匀速直线运动以及竖直方向的自由落体运动的合运动。平抛运动轨迹为一抛物线。平抛运动是曲线运动，平抛运动的时间仅与抛出点的竖直高度有关，物体落地的水平位移与时间及水平初速度有关。

如何使用Canvas实现平抛运动呢？

第一步：首先需要两个小球，一个小球的速度为（x:0,y:0）,另一个小球的速度为（x:400,y;0）:

  var balls = [];
        balls.length = 0;
        var ball1 = {
            x: 70,
            y: 50,
            r: 10,
            vx: 400,
            vy: 0
        };
        var ball2 = {
            x: 50,
            y: 50,
            r: 10,
            vx: 0,
            vy: 0
        };
        balls.push(ball1);
        balls.push(ball2);

第二步：利用Jscex循环，让小球运动起来

    <canvas id="myCanvas" width="600" height="500">
你的浏览器不支持canvas
</canvas>
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        var balls = [];
        balls.length = 0;
        var ball1 = {
            x: 70,
            y: 50,
            r: 10,
            vx: 400,
            vy: 0
        };
        var ball2 = {
            x: 50,
            y: 50,
            r: 10,
            vx: 0,
            vy: 0
        };
        balls.push(ball1);
        balls.push(ball2);
        var cyc = 110;
        var a = 80;
        cxt.fillStyle = "#030303";
        cxt.fillRect(0, 0, c.width, c.height);
        var moveAsync = eval(Jscex.compile("async", function () {
            while (true) {
                cxt.fillStyle = "rgba(0,0,0,.3)";
                cxt.fillRect(0, 0, c.width, c.height);
                cxt.fillStyle = "#fff";
                for (var i in balls) {
                    cxt.beginPath();
                    cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                    balls[i].y += balls[i].vy * cyc / 1000;
                    balls[i].x += balls[i].vx * cyc / 1000;
                    if (balls[i].r + balls[i].y >= c.height) {
                        if (balls[i].vy > 0) {
                           // balls[i].vy *= -0.7;
                        }
                    } else {
                        balls[i].vy += a;
                    }
                }
                $await(Jscex.Async.sleep(cyc));
            }
        }));
        moveAsync().start();
    </script>

其效果如下：

疯狂的大炮：

第一步：需要一张大炮的图片，

通过如下方式加载图片：

 var img = new Image();
        img.src = "../../Images/orderedList1.png";
        img.onload = function () {
            cxt.drawImage(img, 0, 325);
        }

第二步：模拟炮弹，在每次循环时生成一个炮弹：

 var ball = {
                    x: 185,
                    y: 470,
                    r: getRandomNumber(0, 20),
                    vx: getRandomNumber(190, 3000),
                    vy: getRandomNumber(-3000, 0)
                };
                balls.push(ball);
                if (balls.length > 100) {
                    balls.shift();
                }

当炮弹射出数量大于100时，从balls中移除一个小球，以防止浏览器堆栈溢出，其中getRandomNumber方法是自定义方法，可以获得一定范围内的随机数：

 function getRandomNumber(min, max) {
            return (min + Math.floor(Math.random() * (max - min + 1)))
        }

第三步，Jscex循环实现大炮的猛烈轰炸：

   var fireAsync = eval(Jscex.compile("async", function () {
            while (true) {
                var ball = {
                    x: 185,
                    y: 470,
                    r: getRandomNumber(0, 20),
                    vx: getRandomNumber(190, 3000),
                    vy: getRandomNumber(-3000, 0)
                };
                balls.push(ball);
                if (balls.length > 100) {
                    balls.shift();
                }
                cxt.fillStyle = "rgba(0,0,0,.3)";
                cxt.fillRect(0, 0, c.width, c.height);
                cxt.fillStyle = "#fff";
                cxt.drawImage(img, 0, 425);
                for (i in balls) {
                    cxt.beginPath();
                    cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                    balls[i].y += balls[i].vy * cyc / 1000;
                    balls[i].x += balls[i].vx * cyc / 1000;
                    if (balls[i].r + balls[i].y >= c.height) {
                        if (balls[i].vy > 0) {
                            balls[i].vy *= -0.7;
                        }
                    } else {
                        balls[i].vy += a;
                    }
                }
                $await(Jscex.Async.sleep(cyc));
            }
        }));
        fireAsync().start();

运行效果如下：