如何實(shí)現(xiàn)html5canvas粒子形成下雪背景的效果-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了如何實(shí)現(xiàn)html5 canvas粒子形成下雪背景的效果，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“如何實(shí)現(xiàn)html5 canvas粒子形成下雪背景的效果”這篇文章吧。

“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來堅(jiān)持追求的企業(yè)文化。創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場，引領(lǐng)市場！html是什么

html的全稱為超文本標(biāo)記語言，它是一種標(biāo)記語言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。

<!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");//創(chuàng)建畫筆
    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;
    };//當(dāng)瀏覽器刷新的時(shí)候刷新
    var num = 1000;//數(shù)量
    var shuju = [];//空數(shù)組
    for(i = 0;i<num;i++){
        shuju.push({//數(shù)組末項(xiàng)添加
            x : Math.random()*w, 
            y : Math.random()*h,
            r : Math.random()*2
        });
        draw(shuju[i].x,shuju[i].y,shuju[i].r)//for循環(huán)循環(huán)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循環(huán)
            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);//調(diào)取
        }
    }

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

</script>

以上就是關(guān)于“如何實(shí)現(xiàn)html5 canvas粒子形成下雪背景的效果”的內(nèi)容，如果改文章對(duì)你有所幫助并覺得寫得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

當(dāng)前題目：如何實(shí)現(xiàn)html5canvas粒子形成下雪背景的效果-創(chuàng)新互聯(lián)
地址分享：http://muchs.cn/article34/djgppe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、自適應(yīng)網(wǎng)站、電子商務(wù)、網(wǎng)站導(dǎo)航、建站公司、用戶體驗(yàn)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容