2

我决定尝试更多地了解 HTML5 画布，并构建一个背景为飘落的雪花的页面。我希望能够动态地执行此操作（我知道如何使对象在画布等上移动，并且可以手动执行此操作）。我的意思是我想简单地更改一个变量来控制页面上一次有多少雪花，而不必复制和粘贴代码。我也不是 100% 确定我的语法是否适用于某些对象和循环。

我第一次尝试寻找一个教程来引导我完成这个过程，但找不到任何关于如何制作雪的教程。如果有人碰巧知道一个并且会给出一个很棒的链接。到目前为止，这是我的代码。

<!DOCTYPE html>
<html>
<head>
<title>Obese</title>
<style type="text/css">
    body
{
     background-color:black;
    }
</style>
</head>
<body>
<script type="text/javascript">
    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 = 0;
        var toberadius = Math.random() * 50;
        this.radius = toberadius + 10;
        this.color = "white";
        var tobefallingSpeed = Math.random() * 100;
        this.fallingSpeed = tobefallingSpeed + 30;
        numberofSnowflakes++;
    }
    function update(m)
    {
        if (snowflakes < numberofSnowflakes)
        {
            for (i=0;i<numberofSnowflakes;i++)
            {
                sf[i] = new snowflake();
                snowflakes = i;
            }
        }
        for (c=0;c<snowflakes;c++)
        {
            sf[m].y += sf[m].fallingSpeed * m;
        }
    }
    function render()
    {
        for (b=0;b<snowflakes;b++)
        {
            ctx.fillStyle = "#FFFFFF";
            ctx.fillRect(sf[b].x,sf[b].y,sf[b].radius,sf[b].radius);
        }
    }
    function main()
    {
        alert('asdf');
        now = Date.now();
        delta = now - then;
        update(delta/1000);
        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 = 50;
    var snowflakes = 0;
    var sf = new Object();


</script>
</body>
</html>
4

1 回答 1

0

正如我在评论中提到的，我实际上创建了自己的 snow 插件，该插件已在一些网站、博客文章和Github上使用。所以不用说我是这种效果的粉丝:)。

下面的代码应该可以帮助您入门。

工作版本

 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;
    }
于 2012-06-29T20:57:28.657 回答