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

コメントで述べたように、私は実際にいくつかのWebサイト、ブログ投稿、Githubで使用されている独自のsnowプラグインを作成しました。言うまでもなく、この効果のファンです:)。

以下のコードで開始できます。

作業バージョン

 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 に答える