如何實現html5canvas粒子形成下雪背景的效果-創新互聯

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

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

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

<!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>

以上就是關于“如何實現html5 canvas粒子形成下雪背景的效果”的內容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關知識內容，請多多關注創新互聯網站制作公司行業資訊頻道。

當前題目：如何實現html5canvas粒子形成下雪背景的效果-創新互聯
地址分享：http://vcdvsql.cn/article34/djgppe.html

成都網站建設公司_創新互聯，為您提供標簽優化、自適應網站、電子商務、網站導航、建站公司、用戶體驗

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

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

如何實現html5canvas粒子形成下雪背景的效果-創新互聯