HTML5 canvas particles create the effect of snowy background-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 canvas particles create the effect of snowy background

不言

Aug 31, 2018 am 11:42 AM

canvas html5

The content of this article is about the effect of html5 canvas particles forming a snowy background. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>canvas粒子形成下雪背景</title>
    body{
        margin: 0px;
        padding: 0px;
    }
    #canvas{
        display: block;
        background: #222;
    }
</style>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");//获取canvas
    var ctx = canvas.getContext("2d");//创建画笔
    var w = canvas.width = window.innerWidth;//浏览器宽度
    var h = canvas.height = window.innerHeight;//浏览器高度
    window.onresize = function(){
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
    };//当浏览器刷新的时候刷新
    var num = 1000;//数量
    var shuju = [];//空数组
    for(i = 0;i<num;i++){
        shuju.push({//数组末项添加
            x : Math.random()*w, 
            y : Math.random()*h,
            r : Math.random()*2
        });
        draw(shuju[i].x,shuju[i].y,shuju[i].r)//for循环循环darw function
    };
    console.log(shuju[0]);

    function draw(x1,y1,r1){
        ctx.beginPath();//开始绘画
        ctx.fillStyle = "#fff";//颜色
        ctx.arc(x1,y1,r1,0,2*Math.PI,false)//arc园
        ctx.fill();//填充
    }

    function chageY(){
        for(var i = 0;i<num;i++){//for循环
            shuju[i].y += Math.random()*5;
            if(shuju[i].y > h){//大于高度
                shuju[i].y = 0;//等于0
            }
            draw(shuju[i].x,shuju[i].y,shuju[i].r);//调取
        }
    }

    setInterval(function(){
        ctx.clearRect(0,0,w,h);//清楚画布 0 0 高度 宽度
        chageY(); 
    },10);

</script>

Copy after login

Related recommendations:

HTML5 super realistic snow scene effect

##HTML5 Canvas creates super dreamy web background effects

The above is the detailed content of HTML5 canvas particles create the effect of snowy background. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn