h5+js生成随机大小的雪花

来源：互联网发布：不用网络的电视软件编辑：程序博客网时间：2024/05/11 14:12

双旦即将来临，来点雪花为即将到来的节日添加点色彩吧！初学者，不喜勿喷

利用H5中的canvas+js制作出简单的雪花降落的动态效果！

html代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>snow</title>    <style>        .mc-pic{            position:absolute;            left:0;            top:0;            background-color:rgba(73, 73, 73, 0.63);            overflow: hidden;            }    </style></head><body height="100%">    <div class="mc-pic" id="mc-pic">        <canvas id=canvas></canvas>    </div>    <script src="snow.js"></script></body></html>

js代码如下

var snowflakes = [];WINDOW_WIDTH =  window.screen.availWidth ;WINDOW_HEIGHT =  window.screen.availHeight ;window.onload=function(){    //获取绘图画板    var canvassnow =document.getElementById("canvas");    var contextsnow = canvassnow.getContext("2d");    canvassnow.width = WINDOW_WIDTH;    canvassnow.height = WINDOW_HEIGHT;     //设置和清除动画效果，动画效果持续时间为15s    var startTime = new Date().getTime();    var interval = setInterval(function(){               if(new Date().getTime() - startTime > 15000){            clearInterval(interval);            document.getElementById("mc-pic").style.display = "none";            return;        }            initSnowFlake();            updateMultiFlake(contextsnow);    }, 50);}function initSnowFlake(){    var aFlake = {        x: Math.random()*WINDOW_WIDTH,        y: 0,        g:0.5+Math.random()*0.5,        vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,        vy:0.5,        r: Math.random()*30    }    snowflakes.push(aFlake);}function updateMultiFlake(ctxsnow){    ctxsnow.clearRect( 0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);    var snow=new Image();    snow.src="images/mc/mc_snow1.png";    for(var i=0;i<snowflakes.length;i++){        snowflakes[i].x += snowflakes[i].vx;        snowflakes[i].y += snowflakes[i].vy;        snowflakes[i].vy += snowflakes[i].g;        snowflakes[i].r = snowflakes[i].r*0.99;        ctxsnow.drawImage(snow,snowflakes[i].x,snowflakes[i].y,snowflakes[i].r,snowflakes[i].r);    }}

给这段代码设置的时间为15秒，雪花在每次下降的过程中逐渐减小。大家可以根据自己的需要对时间进行更改！这段代码没有考虑到碰撞检测的部分，有兴趣的可以自己做一下。

阅读全文

3 0