App下載

如何使用html5實現(xiàn)雪花效果?通過canvas實現(xiàn)雪花飄動效果案例分享！

猿友 2021-07-30 11:16:23 瀏覽數(shù) (3481)
反饋

不知道各位小伙伴們是否有見過雪花，沒有見到過的小伙伴們今天小編就來和大家講講有關(guān)于：“如何使用html5實現(xiàn)雪花效果?”這個問題的相關(guān)內(nèi)容分享！

一、canvas是什么？

HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.

<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。

你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。

二、canvas的基本用法

1.創(chuàng)建一個畫布（Canvas）：

<canvas id="myCanvas" width="200" height="100"></canvas>

2.使用JavaScript繪制圖像：

//首先找到<canvas>元素
var c=document.getElementById("myCanvas");
//然后創(chuàng)建context對象
var ctx=c.getContext("2d");
//下面的兩行代碼繪制一個紅色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

getContext("2d") 對象是內(nèi)建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

設(shè)置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設(shè)置是#000000。

3.Canvas 坐標

canvas 是一個二維網(wǎng)格。
canvas 的左上角坐標為 (0,0)
ctx.fillRect(0,0,150,75);
上面的 fillRect 方法擁有參數(shù) (0,0,150,75)。
意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。

4.Canvas - 路徑

moveTo(x,y) 定義線條開始坐標
lineTo(x,y) 定義線條結(jié)束坐標
在canvas中繪制圓形, 我們將使用以下方法:

arc(x,y,r,start,stop)

使用arc() 畫一個圓:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

三、實現(xiàn)雪花飄動的思路

1.創(chuàng)建一個畫布（Canvas）

 var canvas =document.getElementById("canvas")
    //參數(shù) contextID 指定了您想要在畫布上繪制的類型。
    //當前唯一的合法值是 "2d"，它指定了二維繪圖，
    //并且導(dǎo)致這個方法返回一個環(huán)境對象，該對象導(dǎo)出一個二維繪圖 API。
    var context = canvas.getContext("2d")
    var w =window.innerWidth
    var h =window.innerHeight
    canvas.width = w;
    canvas.height =h; 

2.創(chuàng)建雪花的對象數(shù)組

 var count =200 //雪花的個數(shù)
    var snows=[] //雪花對象數(shù)組
    for (var i=0 ; i< count;i++){
        snows.push({
            x:Math.random()*w,//Math.random()用于生成0～1的隨機數(shù)
            y:Math.random()*h,
            r:Math.random()*5,
        })
    }

3.繪制雪花樣式

 function draw(){
        context.clearRect(0,0,w,h)
        context.beginPath()
        for(var i=0; i<count;i++){
            var snow = snows[i];//遍歷每一片雪花
            context.fillStyle ="rgb(255,255,255)" //設(shè)置雪花的樣式
            context.shadowBlur=10;
            context.shadowColor="rgb(255,255,255)";
            //moveTo 的方法是可以移動到指定的坐標
            context.moveTo(snow.x,snow.y)
            // 使用canvas arc()創(chuàng)建一個圓形
             //x，y，r：圓的中心的x坐標和y坐標，r為半徑
            //0,Math.PI * 2起始弧度和結(jié)束弧度
            
            context.arc(snow.x,snow.y,snow.r,0,Math.PI * 2)
            
        }
        //畫布填充
        context.fill()
        move()
    }

4.實現(xiàn)雪花飄動

 function move(){
        for (var i=0;i<count;i++){
            var snow =snows[i];
            snow.y +=(7-snow.r)/10 //從上往下飄落
            snow.x+=((5-snow.r)/10)//從左到右飄落
            if(snow.y>h){
                snows[i]={
                    x:Math.random()*w,
                    y:Math.random()*h,
                    r:Math.random()*5,
                }
            }
        }
    }

5.設(shè)置刷新

 draw()
    //每毫秒刷新一次
 setInterval(draw,1)

6.完整代碼:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>雪花飄飄之使用canvas元素用于在網(wǎng)頁上繪制圖形。</title>
 
 <style type="text/css">
  *{
            margin:0;
            padding:0;
            /* background-color: seagreen; */
            background: url("雪人.jpg")  no-repeat;
            background-size:100% 100%;
        }
  /* .can{
            filter: blur(1px);
        } */
 </style>
</head>
<body>
 <canvas id="canvas" class="can"></canvas>

 <script type="text/javascript">
    //canvas 元素用于在網(wǎng)頁上繪制圖形。
 var canvas =document.getElementById("canvas")
    //參數(shù) contextID 指定了您想要在畫布上繪制的類型。
    //當前唯一的合法值是 "2d"，它指定了二維繪圖，
    //并且導(dǎo)致這個方法返回一個環(huán)境對象，該對象導(dǎo)出一個二維繪圖 API。
    var context = canvas.getContext("2d")
    var w =window.innerWidth
    var h =window.innerHeight
    canvas.width = w;
    canvas.height =h;
    var count =200 //雪花的個數(shù)
    var snows=[] //雪花對象數(shù)組
    for (var i=0 ; i< count;i++){
        snows.push({
            x:Math.random()*w,//Math.random()用于生成0～1的隨機數(shù)
            y:Math.random()*h,
            r:Math.random()*5,
        })
    }
    //繪制雪花
    function draw(){
        context.clearRect(0,0,w,h)
        context.beginPath()
        for(var i=0; i<count;i++){
            var snow = snows[i];//遍歷每一片雪花
            context.fillStyle ="rgb(255,255,255)" //設(shè)置雪花的樣式
            context.shadowBlur=10;
            context.shadowColor="rgb(255,255,255)";
            //moveTo 的方法是可以移動到指定的坐標
            context.moveTo(snow.x,snow.y)
            // 使用canvas arc()創(chuàng)建一個圓形
             //x，y，r：圓的中心的x坐標和y坐標，r為半徑
            //0,Math.PI * 2起始弧度和結(jié)束弧度
            
            context.arc(snow.x,snow.y,snow.r,0,Math.PI * 2)
           
            
        }
        //畫布填充
        context.fill()
        move()
    }
    //雪花飄動
    function move(){
        for (var i=0;i<count;i++){
            var snow =snows[i];
            snow.y +=(7-snow.r)/10 //從上往下飄落
            snow.x+=((5-snow.r)/10)//從左到右飄落
            if(snow.y>h){
                snows[i]={
                    x:Math.random()*w,
                    y:Math.random()*h,
                    r:Math.random()*5,
                }
            }
        }
    }
    draw()
    //每毫秒刷新一次
 setInterval(draw,1)
 </script>
</body>
</html>

總結(jié)

在制熱的炎夏中希望小編的分享可以給大家?guī)斫禍匦Ч?，通過這篇文章大家對于：“如何使用html5實現(xiàn)雪花效果?”這方面的實現(xiàn)效果也有了眉目，當然了如果你對html5這方面有感興趣的話也是可以在W3Cschool中進行一個全面的學(xué)習(xí)和了解！ 


HTML5

0 人點贊