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

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

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

html的全稱為超文本標(biāo)記語言，它是一種標(biāo)記語言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和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)瀏覽器刷新的時候刷新
    var num = 1000;//數(shù)量
    var shuju = [];//空數(shù)組
    for(i = 0;i<num;i++){
        shuju.push({//數(shù)組末項添加
            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)于“如何實現(xiàn)html5 canvas粒子形成下雪背景的效果”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

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

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

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

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

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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