如何在不创建新部分的情况下只保留覆盖页面的雪效果?

How do I only keep the snow effect to cover my page without creating a new section?

本文关键字：覆盖 保留 情况下 创建 新部      更新时间：2023-09-26

我新的html和我使用这个在我的js文件，我不确定如何编辑这样的代码，我只能得到的效果只有不创建画布…，只是为了覆盖我当前的内容。

 function vp(woh)
    {
        var viewportwidth;
        var viewportheight;
        if (typeof window.innerWidth != 'undefined')
        {
             viewportwidth = window.innerWidth,
             viewportheight = window.innerHeight
         }
         else if (typeof document.documentElement != 'undefined'
             && typeof document.documentElement.clientWidth !=
             'undefined' && document.documentElement.clientWidth != 0)
         {
             viewportwidth = document.documentElement.clientWidth,
             viewportheight = document.documentElement.clientHeight
         }
         else
         {
               viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
               viewportheight = document.getElementsByTagName('body')[0].clientHeight
         }
            if (woh == 'w')
            {
                return viewportwidth;
            }
            else if (woh == 'h')
            {
                return viewportheight;
            }
            else
            {
                return false;
            }
        }
    function snowflake()
    {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.radius = Math.random()*2;
        this.color = "white";
        var tobefallingSpeed = Math.random() * 100;
        this.fallingSpeed = tobefallingSpeed + 30;
    }
    function render()
    {
        ctx.clearRect(0,0,canvas.width, canvas.height);
        for (b=0;b<snowflakes;b++)
        {  
            sf[b].y+=0.4;
            if(sf[b].y> canvas.height){
             sf[b].y = 0;   
            }
            ctx.fillStyle = "#FFFFFF";
            ctx.fillRect(sf[b].x,sf[b].y,sf[b].radius,sf[b].radius);
        }
    }
    function main()
    {
        now = Date.now();
        delta = now - then;
        render();
        then = now;
    }
    then = Date.now();
    var int = self.setInterval(main,1);
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = vp('w');
    canvas.height = vp('h');
    document.body.appendChild(canvas);
    var numberofSnowflakes = 100;
    var sf = [];
    for (i=0;i<numberofSnowflakes;i++)
    {
        sf[i] = new snowflake();
        snowflakes = i;
    }

我不记得这段代码是从哪里来的(或者我自己写了多少)，所以如果有人想要功劳，我很乐意给他，但如果你只是想要一些没有画布的雪花，你可以试试这个:

<div id="snowflakes"> [your current content goes here] </div>
    //set background to transparent
    var snowCount = 0;
    function snowFlakes(){
     var randomTime = Math.floor(Math.random() * (500) * 2);
     setTimeout(function(){
     snowCount = snowCount +2;
      jquerysnow();
      snowFlakes();
     },randomTime);
    }
    function jquerysnow() {
     var fs = Math.floor(Math.random() * (30 - 20) + 20),
           snow = $('<div class="snow" style="font-size:'+fs+'px;"></div>'),
           dH = $(document).height() + 'px',
           sf = $('#snowflakes');
     sf.prepend(snow);
       snowX = Math.floor(Math.random() * sf.width());
     snowSpd = Math.floor(Math.random() * (500) * 20);
     snow.css({'left':snowX+'px'});
     snow.html('&#x2744;');
     snow.animate({top : dH, opacity : '1',}, 9000, function(){
                $(this).remove();
            });
    }
    snowFlakes();
    </script>
相关文章：