html掉落本地图片效果

java_t_t

已于 2023-07-02 22:31:08 修改

阅读量1.3k

点赞数 2

分类专栏：前端文章标签： html 前端 canvas

于 2023-07-02 22:22:57 首次发布

本文链接：https://blog.csdn.net/java_t_t/article/details/131506271

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现一个加载本地图片并掉落的html页面。

说明

将DuanWu.html与zongzi_1.png, zongzi_2.png, zongzi_3.png, yadan.png4张图片放在同一个目录下，然后双击打开DuanWu.html即可。

使用Chrome或Microsoft Edge浏览器打开
若使用IE浏览器打开，下方会出现Internet Explorer已限制此网页运行脚本或ActiveX控件。，请点击右边允许阻止的内容(A)

代码

DuanWu.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地图片飘落效果</title>
    <style>
        body {
            background-color: #1a6840;
            overflow: hidden;
        }

        canvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var ctx = canvas.getContext('2d');
        var leaves = [];
        var numLeaves = 28;
        images = loadImages()
        function loadImages() {
            images = []
            images[0] = new Image()
            images[0].src = "zongzi_1.png"
            images[1] = new Image()
            images[1].src = "zongzi_2.png"
            images[2] = new Image()
            images[2].src = "zongzi_3.png"
            images[3] = new Image()
            images[3].src = "yadan.png"
            return images
        }
        function createLeaf(image) {
            this.x = Math.random() * canvas.width;
            this.y = -100;
            this.vx = Math.random() * 2 - 1;
            this.vy = Math.random() * 3 + 1;
            this.draw = function () {
                ctx.drawImage(image, this.x, this.y, image.width, image.height);
            }
            this.update = function () {
                this.x += this.vx;
                this.y += this.vy;
                if (this.y > canvas.height + 10) {
                    this.y = -10;
                    this.x = Math.random() * canvas.width;
                }
            }
        }
        function init() {
            for (var i = 0; i < numLeaves; i++) {
                leaves.push(new createLeaf(images[i % images.length]));
            }
        }
        function loop() {
            requestAnimationFrame(loop);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (var i = 0; i < numLeaves; i++) {
                leaves[i].draw();
                leaves[i].update();
            }
        }

        init();
        loop();
    </script>
</body>

</html>