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

最新推荐文章于 2024-04-15 21:35:45 发布

qq_31091795

最新推荐文章于 2024-04-15 21:35:45 发布

阅读量569

点赞数 5

文章标签：雪花 H5 JS

本文链接：https://blog.csdn.net/qq_31091795/article/details/78849358

版权

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

利用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.οnlοad=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秒，雪花在每次下降的过程中逐渐减小。大家可以根据自己的需要对时间进行更改！这段代码没有考虑到碰撞检测的部分，有兴趣的可以自己做一下。