html+vue3 模拟下雨效果（手机版）

性野喜悲

已于 2022-05-26 11:35:56 修改

阅读量481

点赞数

分类专栏： vue 经验分享文章标签： html javascript 前端

于 2022-05-26 10:45:59 首次发布

本文链接：https://blog.csdn.net/leng0920/article/details/124980195

版权

经验分享同时被 2 个专栏收录

149 篇文章 1 订阅

订阅专栏

vue

136 篇文章 4 订阅

订阅专栏

效果：

rain.js

// 画笔
var ctx;
// 画布的宽高
var wh = window.innerWidth;
var ht = window.innerHeight;
// 存放雨滴的数组
var arr = [];
// 雨滴的数量
var size = 150;
// 雨滴的构造函数
class Rain {
    x = random(wh);
    y = random(ht);
    ySpeed = random(2) + 5;
    show() {
        drawLine(this.x, this.y);
    }
    run() {
        if (this.y > ht) {
            this.y = 0;
            this.x = random(wh);
        }
        this.y = this.y + this.ySpeed;
    }
}
// 画线（雨滴）
function drawLine(x1, y1) {
    ctx.beginPath();
    ctx.strokeStyle = "#ddd";
    ctx.moveTo(x1, y1);
    // 雨长度为30
    ctx.lineTo(x1, y1 + 15);
    ctx.stroke();
}
// 生成随机数
function random(num) {
    return Math.random() * num;
}
// 开始
function start() {
    for (var i = 0; i < size; i++) {
        var rain = new Rain();
        arr.push(rain);
        rain.show();
    }
    setInterval(() => {
        ctx.clearRect(0, 0, wh, ht);
        for (var i = 0; i < size; i++) {
            arr[i].show();
            arr[i].run();
        }
    }, 10);
}
// 初始化
function initRain(ctx1) {
    ctx = ctx1;
    start();
}

html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>雨滴</title>
 
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        // 可以在这里指定
        /*
         * APP_API_HOST 请求接口默认本地都是测试接口，线上都是正式接口，可以在这里指定
         * tokenName token名称 因为所有微站公用一个域名，所以当涉及登录模块时，就需要设定与微站相关的唯一的token名称（例如：const tokenName = 'xxxToken'），默认为空，请求头都没有token字段
         * */
        backReload();
    </script>
  
        <style>
            #canvas_rain{
                width: 100%;
                height: 100vh;
                position: fixed;
                z-index: 100;
                left: 0;
                top: 0;
            }
        </style>
</head>

<body>
    <div id="app" v-cloak>
        <div>
            <div class="home">
                <img :style="canvasStyle"
                    src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/minsheng_fun/com_page_bg.png" />
                <canvas id="canvas_rain" ></canvas>
                <!-- 换成自己的图片 -->
                
            </div>
        </div>
    </div>
</body>
<!-- 引入自己文件夹里的js或者通过cdn引入 -->
<script src="./static/axios-v0.24.0.min.js">
</script>
<script src="./static/vue-v3.js"></script>
<script src="./static/vant-v3.min.js"></script>
<!-- 引入雨滴js -->
<script src="./static/rain.js ?v=1"></script>

<script>


    const {
        createApp,
        reactive,
        toRefs,
        ref,
        onMounted,
        watch,
        computed
    } = Vue;
    const TL_APP = createApp({
        setup(props, context) {

            const pageData = reactive({
                canvasStyle: {
                    position: "fixed",
                    width: "100%",
                    height: "100%",
                    zIndex: "-1",
                    left: "0",
                    bottom: "0",
                },
                ctx: {},
                initCanvas() {
                    const canvas = document.querySelector("#canvas_rain");
                    this.ctx = canvas.getContext("2d");
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;
                    initRain(this.ctx);
                },

            })
            onMounted(() => {
                pageData.initCanvas();
            })
            return {
                ...toRefs(pageData)
            }
        }
    })
    TL_APP.use(vant);
    TL_APP.mount('#app');
</script>

</html>

参考链接：

https://blog.csdn.net/weixin_44037364/article/details/121952035https://blog.csdn.net/weixin_44037364/article/details/121952035

性野喜悲

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html+vue3 模拟下雨效果（手机版）

效果：rain.js// 画笔var ctx;// 画布的宽高var wh = window.innerWidth;var ht = window.innerHeight;// 存放雨滴的数组var arr = [];// 雨滴的数量var size = 150;// 雨滴的构造函数class Rain { x = random(wh); y = random(ht); ySpeed = random(2) + 5; show() {.
复制链接

扫一扫