canvas 动态雪花

最新推荐文章于 2022-07-25 17:08:39 发布

等待戈多的莱昂纳多

最新推荐文章于 2022-07-25 17:08:39 发布

阅读量154

点赞数

分类专栏：前端基础。

本文链接：https://blog.csdn.net/weixin_44892520/article/details/101851934

版权

前端基础。专栏收录该内容

42 篇文章 0 订阅

订阅专栏

```javascript
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    var snow = [];
    var canvas = document.getElementById("canvas");
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight
    canvas.width = w;
    canvas.height = h;
    var cx = canvas.getContext("2d");

    drawmap();
    //画雪花
    for (var i = 0; i < 200; i++) {
        var s = new Image();
        s.setAttribute("data-way", Math.floor(Math.random() * 2))
        var sw = randomwidth();
        var x = randompos(w) - sw;
        var y = randompos(600);
        s.src = "./img/snow.png";
        cx.drawImage(s, x, y, sw, sw);
        snow.push([s, x, y, sw]);
    }
    function randomwidth() {
        return Math.random() * 20 + 10;
    }
    function randompos(w) {
        return Math.random() * w;
    }
    function drawmap() {
        var img = new Image();
        img.src = "./img/2.jpg";
        cx.drawImage(img, 0, 0, w, h);
    }
    loop();
    function loop() {
        cx.clearRect(0, 0, w, h);
        drawmap();
        for (var i = 0; i < snow.length; i++) {
            var x;
            if (snow[i][0].getAttribute("data-way") == "0") {
                x = ++snow[i][1];
            }
            else {
                x = --snow[i][1];
            }

            if (x > w) {
                snow[i][1] = 0;
            }
            if (x < 0) {
                snow[i][1] = w - snow[i][3];
            }
            var y = ++snow[i][2];
            if (y >= 600) {
                snow[i][2] = 0;
            }
            cx.drawImage(snow[i][0], x, y, snow[i][3], snow[i][3]);
        }
        window.requestAnimationFrame(loop);
    }
    ;
    // canvas 画图板
</script>
</body>
</html>

等待戈多的莱昂纳多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 动态雪花

```javascript<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; ...
复制链接

扫一扫

专栏目录