欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效

 更新時(shí)間：2023年03月27日 16:33:01   作者：北極光之夜。  
這篇文章主要介紹了使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效,在頁(yè)面上移動(dòng)鼠標(biāo),移動(dòng)軌跡上會(huì)有星星灑落,非常的好看炫酷,想知道怎么做的朋友一起來(lái)看看吧

效果：

在這里插入圖片描述

實(shí)現(xiàn)：

1. 獲取畫布：

    // 獲取畫布
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");

2.讓畫布自適應(yīng)窗口大小，這個(gè)復(fù)制即可：

// 讓畫布自適應(yīng)窗口大小，這個(gè)復(fù)制即可
    window.onresize=resizeCanvas;
    function resizeCanvas(){
       canvas.width=window.innerWidth;
       canvas.height=window.innerHeight;
    }  
    resizeCanvas();

3. 給畫布css樣式，固定定位，且阻止用戶的鼠標(biāo)事件：

// 給畫布css樣式，固定定位，且阻止用戶的鼠標(biāo)事件
    canvas.style.cssText = `
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    `

4.定義數(shù)組：

 //定義數(shù)組，arr存放每個(gè)小星星的信息，colour為顏色數(shù)組，存幾個(gè)好看的顏色
    var arr = [];
    var colours =["#ffff00","#66ffff","#3399ff","#99ff00","#ff9900"];

5.綁定鼠標(biāo)移動(dòng)事件：

//綁定鼠標(biāo)移動(dòng)事件
    window.addEventListener('mousemove', e=>{           
        // 每移動(dòng)觸發(fā)一次事件給arr數(shù)組添加一個(gè)星星
            arr.push({
                // x是初始橫坐標(biāo)
                x:e.clientX,
                //y是初始縱坐標(biāo)
                y:e.clientY,
                //r是星星里面那個(gè)小圓半徑，哪來(lái)的小圓等會(huì)說(shuō)
                r:Math.random()*0.5+1.5,
                //運(yùn)動(dòng)時(shí)旋轉(zhuǎn)的角度
                td:Math.random()*4-2,
                // X軸移動(dòng)距離
                dx:Math.random()*2-1,
                // y軸移動(dòng)距離
                dy:Math.random()*1+1,
                // 初始的旋轉(zhuǎn)角度
                rot: Math.random()*90+90,
                // 顏色
                color: colours[Math.floor(Math.random()*colours.length)]
            });
           
    })

6.封裝繪制一個(gè)五角星函數(shù)：

在這里插入圖片描述

  首先看這個(gè)圖，可以看出繪制一個(gè)五角星可通過(guò)在一個(gè)小圓和一個(gè)大圓上各自繪制5個(gè)點(diǎn)然后各個(gè)點(diǎn)順序用線連起來(lái)就能形成五角星。
  而一個(gè)圓上的點(diǎn)與點(diǎn)之間可以知道是360/5=72度。若圓半徑是R，通過(guò)高中數(shù)學(xué)可知每個(gè)點(diǎn)的：
  x坐標(biāo)為：R * cos（它的角度）
  y坐標(biāo)為：R *sin（它的角度）
還有公式：
  弧度 = 角度 * π / 180
因?yàn)镸ath.cos（）與Math.sin（）里是計(jì)算弧度的，所以要轉(zhuǎn)換。

 // 封裝繪制一個(gè)五角星函數(shù)
    // x是圓心橫坐標(biāo)，y是圓心縱坐標(biāo)，其實(shí)就是鼠標(biāo)位置（x ，y）
    // r是里面小圓半徑 ，l是大圓半徑
    // rot是初始旋轉(zhuǎn)角度
    function star(x,y,r,l,rot){
       ctx.beginPath();
       // 循環(huán)5次，因?yàn)?個(gè)點(diǎn)
        for(let i=0;i<5;i++){  
            //先繪制小圓上一個(gè)點(diǎn)       
           ctx.lineTo(Math.cos((18 + i*72 -rot)*Math.PI/180)*r+x,
           -Math.sin((18 + i*72 - rot)*Math.PI/180)*r+y);
           //連線到大圓上一個(gè)點(diǎn)
           ctx.lineTo(Math.cos((54+i*72-rot)*Math.PI/180)*l+x
               ,-Math.sin((54+i*72 -rot)*Math.PI/180)*l+y);             
        }
        ctx.closePath();   
    }

7. 繪制動(dòng)畫一幀的星星：

// 繪制一堆星星
    function draw(){
        //循環(huán)數(shù)組
        for(let i=0;i<arr.length;i++){
            let temp = arr[i];
            //調(diào)用繪制一個(gè)星星函數(shù)
            star(temp.x,temp.y,temp.r,temp.r*3,temp.rot);
            //星星顏色
            ctx.fillStyle = temp.color;
            //星星邊框顏色
            ctx.strokeStyle = temp.color;
            //線寬度
            ctx.lineWidth = 0.1;
            //角有弧度
            ctx.lineJoin = "round";
            // 填充
            ctx.fill();
            // 繪制路徑
            ctx.stroke();
        }
    }

8.更新星星位置與大?。?/h3> 
//更新動(dòng)畫
    function update(){
        //循環(huán)數(shù)組
        for(let i=0;i<arr.length;i++){
            // x坐標(biāo)+dx移動(dòng)距離
            arr[i].x += arr[i].dx;
            // y坐標(biāo)+dy移動(dòng)距離
            arr[i].y += arr[i].dy;
            // 加上旋轉(zhuǎn)角度
            arr[i].rot += arr[i].td;
            // 半徑慢慢減小
            arr[i].r -= 0.015;
            // 當(dāng)半徑小于0時(shí)
            if(arr[i].r<0){
                //刪除該星星
                arr.splice(i,1);
            }
        }
    }

9.設(shè)置定時(shí)器開(kāi)始動(dòng)畫： 

  //設(shè)置定時(shí)器
    setInterval(()=>{
        //清屏
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //繪制
        draw();
        //更新
        update();
    },20)
})

10.完整代碼：

window.addEventListener('load',()=>{

    // 獲取畫布
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");   
    
    // 讓畫布自適應(yīng)窗口大小，這個(gè)復(fù)制即可
    window.onresize=resizeCanvas;
    function resizeCanvas(){
       canvas.width=window.innerWidth;
       canvas.height=window.innerHeight;
    }  
    resizeCanvas(); 

    // 給畫布css樣式，固定定位，且阻止用戶的鼠標(biāo)事件
    canvas.style.cssText = `
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    `
    //定義數(shù)組，arr存放每個(gè)小星星的信息，colour為顏色數(shù)組，存幾個(gè)好看的顏色
    var arr = [];
    var colours =["#ffff00","#66ffff","#3399ff","#99ff00","#ff9900"];
    
    //綁定鼠標(biāo)移動(dòng)事件
    window.addEventListener('mousemove', e=>{           
        // 每移動(dòng)觸發(fā)一次事件給arr數(shù)組添加一個(gè)星星
            arr.push({
                // x是初始橫坐標(biāo)
                x:e.clientX,
                //y是初始縱坐標(biāo)
                y:e.clientY,
                //r是星星里面那個(gè)小圓半徑，哪來(lái)的小圓等會(huì)說(shuō)
                r:Math.random()*0.5+1.5,
                //運(yùn)動(dòng)時(shí)旋轉(zhuǎn)的角度
                td:Math.random()*4-2,
                // X軸移動(dòng)距離
                dx:Math.random()*2-1,
                // y軸移動(dòng)距離
                dy:Math.random()*1+1,
                // 初始的旋轉(zhuǎn)角度
                rot: Math.random()*90+90,
                // 顏色
                color: colours[Math.floor(Math.random()*colours.length)]
            });
           
    })
    // 封裝繪制一個(gè)五角星函數(shù)
    // x是圓心橫坐標(biāo)，y是圓心縱坐標(biāo)，其實(shí)就是鼠標(biāo)位置（x ，y）
    // r是里面小圓半徑 ，l是大圓半徑
    // rot是初始旋轉(zhuǎn)角度
    function star(x,y,r,l,rot){
       ctx.beginPath();
       // 循環(huán)5次，因?yàn)?個(gè)點(diǎn)
        for(let i=0;i<5;i++){  
            //先繪制小圓上一個(gè)點(diǎn)       
           ctx.lineTo(Math.cos((18 + i*72 -rot)*Math.PI/180)*r+x,
           -Math.sin((18 + i*72 - rot)*Math.PI/180)*r+y);
           //連線到大圓上一個(gè)點(diǎn)
           ctx.lineTo(Math.cos((54+i*72-rot)*Math.PI/180)*l+x
               ,-Math.sin((54+i*72 -rot)*Math.PI/180)*l+y);             
        }
        ctx.closePath();   
    }
    // 繪制一堆星星
    function draw(){
        //循環(huán)數(shù)組
        for(let i=0;i<arr.length;i++){
            let temp = arr[i];
            //調(diào)用繪制一個(gè)星星函數(shù)
            star(temp.x,temp.y,temp.r,temp.r*3,temp.rot);
            //星星顏色
            ctx.fillStyle = temp.color;
            //星星邊框顏色
            ctx.strokeStyle = temp.color;
            //線寬度
            ctx.lineWidth = 0.1;
            //角有弧度
            ctx.lineJoin = "round";
            // 填充
            ctx.fill();
            // 繪制路徑
            ctx.stroke();
        }
    }
    
    //更新動(dòng)畫
    function update(){
        //循環(huán)數(shù)組
        for(let i=0;i<arr.length;i++){
            // x坐標(biāo)+dx移動(dòng)距離
            arr[i].x += arr[i].dx;
            // y坐標(biāo)+dy移動(dòng)距離
            arr[i].y += arr[i].dy;
            // 加上旋轉(zhuǎn)角度
            arr[i].rot += arr[i].td;
            // 半徑慢慢減小
            arr[i].r -= 0.015;
            // 當(dāng)半徑小于0時(shí)
            if(arr[i].r<0){
                //刪除該星星
                arr.splice(i,1);
            }
        }
    }
    
    //設(shè)置定時(shí)器
    setInterval(()=>{
        //清屏
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //繪制
        draw();
        //更新
        update();
    },20)
})

到此這篇關(guān)于使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)鼠標(biāo)星星特效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論