久久频道毛片免费不卡片,伊人久操,成年在线免费观看

主頁(yè) > 知識(shí)庫(kù) > 5分鐘實(shí)現(xiàn)Canvas鼠標(biāo)跟隨動(dòng)畫(huà)背景

5分鐘實(shí)現(xiàn)Canvas鼠標(biāo)跟隨動(dòng)畫(huà)背景

關(guān)于Canvas制作炫酷背景，我會(huì)在git上不定時(shí)去更新，并會(huì)附上詳細(xì)的解析，如果有喜歡的話，可以到git上瞧瞧

gitHub傳送門

前言

相信很多前端小白都看過(guò)這樣的背景動(dòng)畫(huà)，也好奇如何去實(shí)現(xiàn)這種效果！將這種效果應(yīng)用到自己的個(gè)人網(wǎng)站上，會(huì)讓整個(gè)網(wǎng)站變得與眾不同！

下面我會(huì)直擊重點(diǎn)，用最短的時(shí)間，使用 Canvas 制作 鼠標(biāo)跟隨動(dòng)畫(huà)

如何制作動(dòng)畫(huà)

常用的繪圖動(dòng)畫(huà)的方式有以下幾種：

CSS3
SVG
Canvas
WebGL

讓我們先分析分析這些方法的優(yōu)劣性

CSS3 通過(guò)css3的關(guān)鍵幀等方式實(shí)現(xiàn)動(dòng)畫(huà)效果，看起來(lái)好像挺實(shí)用，但這樣增加了一個(gè)沒(méi)有意義的DOM節(jié)點(diǎn)，不符合語(yǔ)義化編程規(guī)范
SVG、Canvas 都可以使用腳本語(yǔ)言來(lái)實(shí)現(xiàn)動(dòng)畫(huà)
- SVG 本質(zhì)上是使用XML描述2D圖形的語(yǔ)言（矢量圖），SVG創(chuàng)建的每一個(gè)元素都是一個(gè)獨(dú)立的DOM元素，既然是獨(dú)立的DOM元素，那表示我們可以通過(guò)CSS和JS來(lái)控制DOM，也可以對(duì)每一個(gè)DOM元素進(jìn)行監(jiān)聽(tīng)，但由于都是DOM元素，所以如果我們修改了SVG中的DOM元素，瀏覽器就會(huì)自動(dòng)進(jìn)行DOM重繪
- Canvas通過(guò)Javascript來(lái)繪制2D圖形（位圖），而Canvas只是一個(gè)HTML元素，其中的圖形不會(huì)單獨(dú)創(chuàng)建DOM元素，所以我們無(wú)法通過(guò)Js來(lái)操作Canvas內(nèi)的圖形，也無(wú)法監(jiān)聽(tīng)具體圖形
WebGL 用于3D展示、動(dòng)畫(huà)、游戲，說(shuō)白了就是基于Canvas的3D框架

Canvas、SVG適用場(chǎng)景

Canvas 適用于位圖，高數(shù)據(jù)量繪制頻率的場(chǎng)景，小游戲，小特效，繪制圖表、活動(dòng)頁(yè)面、炫酷背景
SVG 適用于矢量圖，低數(shù)據(jù)量繪制頻率的場(chǎng)景，如圖形圖表

直擊重點(diǎn)，制作鼠標(biāo)跟隨動(dòng)畫(huà)

最終效果

需求分析：鼠標(biāo)移動(dòng)，經(jīng)過(guò)的地方創(chuàng)建一個(gè)圓，圓的半徑大小由小變大，達(dá)到某個(gè)固定大小時(shí)該圓消失，圓的顏色隨機(jī)變化

創(chuàng)建全屏Canvas元素

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    WIDTH = canvas.width = document.documentElement.clientWidth,
    HEIGHT = canvas.height = document.documentElement.clientHeight,
    para = {
        num: 100,
        color: false,    //  顏色  如果是false 則是隨機(jī)漸變顏色
        radius: 0.9,          //   圓每次增加的半徑 
        o: 0.09,         //      判斷圓消失的條件，數(shù)值越大，消失的越快
    },
    color,
    circleColor,
    round_arr = [];     // 存放圓的數(shù)組

監(jiān)聽(tīng)鼠標(biāo) onmousemove 事件

需求：在鼠標(biāo)移動(dòng)的過(guò)程中，不斷在鼠標(biāo)滑過(guò)的位置產(chǎn)生一個(gè)逐漸變大的圓

Canvas中創(chuàng)建動(dòng)畫(huà)的方式就是不斷的清除屏幕然后重繪

由于移動(dòng)的軌跡是由一個(gè)個(gè)圓構(gòu)成，那我們就應(yīng)該使用數(shù)組存儲(chǔ)圓的信息（xy坐標(biāo)，半徑），然后在鼠標(biāo)移動(dòng)的時(shí)候?qū)⑹髽?biāo)的位置信息存放在數(shù)組中

所以監(jiān)聽(tīng)onmousemove事件就是為了拿到鼠標(biāo)的信息

window.onmousemove = function(event) {
    X = event.clientX  // 當(dāng)前在屏幕的x位置
    Y = event.clientY  // 當(dāng)前在屏幕的y位置

    // 將信息存入圓數(shù)組
    round_arr.push({
        X:X,
        Y:Y,
        radius:para.radius
        o:1
    })
}

設(shè)置 color

在onmousemove中，我們已經(jīng)將坐標(biāo)信息和半徑存入round_arr圓數(shù)組中，接下來(lái)就設(shè)置顏色了

在para對(duì)象里，默認(rèn)的color是false，說(shuō)明圓的顏色是隨機(jī)的，如果color不為false，則圓的顏色就為color的顏色

if(para.color){
    circleColor = para.color
}else{
    color = Math.random() * 360
}

若想要設(shè)置顏色漸變
if (!para.color) {
    color += .1;
    circleColor = 'hsl(' + color + ',100%,80%)';
}

如果要讓顏色變化，則需要將顏色變化的代碼放在一個(gè)會(huì)一直執(zhí)行的函數(shù)

定義 animation() 函數(shù) !important

function animate() {

    if (!para.color) {         # 設(shè)置顏色
        color += .1
        color2 = 'hsl(' + color + ',100%,80%)'
    }

    ctx.clearRect(0, 0, WIDTH, HEIGHT)      # 清除屏幕

    for (var i = 0; i < round_arr.length; i++) {

        ctx.fillStyle = circleColor 
        ctx.beginPath()
        ctx.arc( round_arr[i].X ,round_arr[i].Y,round_arr[i].radius,0, Math.PI * 2)     # 畫(huà)圓
        ctx.closePath()
        ctx.fill()
        round_arr[i].radius += para.radius    # 增大半徑
        round_arr[i].o -= para.o    # 消失快慢

        if( round_arr[i].o <= 0){       # 移除圓
            round_arr.splice(i,1)
            i--
        }
    }

    window.requestAnimationFrame(animate)   # 使用一個(gè)回調(diào)函數(shù)作為參數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用
}

requestAnimationFrame()會(huì)告訴瀏覽器，你需要執(zhí)行動(dòng)畫(huà)，并請(qǐng)求瀏覽器調(diào)用指定的函數(shù)在下一次重繪之前更新動(dòng)畫(huà)。requestAnimationFrame()使用一個(gè)回調(diào)函數(shù)作為參數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用

完整代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鼠標(biāo)屏幕互動(dòng)動(dòng)畫(huà)</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #canvas {
            background: #000;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            WIDTH = canvas.width = document.documentElement.clientWidth,
            HEIGHT = canvas.height = document.documentElement.clientHeight,
            para = {
                num: 100,
                color: false, //  顏色  如果是false 則是隨機(jī)漸變顏色
                radius: 0.9,
                o: 0.09, //  判斷圓消失的條件，數(shù)值越大，消失的越快
            },
            color,
            circleColor,
            round_arr = [];

        window.onmousemove = function(event) {
            X = event.clientX
            Y = event.clientY

            round_arr.push({
                X: X,
                Y: Y,
                radius: para.radius,
                o: 1
            })
        }

        // 判斷參數(shù)中是否設(shè)置color，設(shè)置則使用該color，否則為隨機(jī)
        if (para.color) {
            circleColor = para.color
        } else {
            color = Math.random() * 360
        }

        function animate() {
            if (!para.color) {
                color += .1
                circleColor = 'hsl(' + color + ',100%,80%)'
            }

            ctx.clearRect(0, 0, WIDTH, HEIGHT) // 清除屏幕

            for (var i = 0; i < round_arr.length; i++) {
                ctx.fillStyle = circleColor
                ctx.beginPath() // 開(kāi)始路徑
                ctx.arc(round_arr[i].X, round_arr[i].Y, round_arr[i].radius, 0, Math.PI * 2) // 畫(huà)圓
                ctx.closePath() // 結(jié)束路徑
                ctx.fill()
                round_arr[i].radius += para.radius // 增大圓
                round_arr[i].o -= para.o //  消失時(shí)間變快

                if (round_arr[i].o <= 0) {
                    round_arr.splice(i, 1);
                    i--;
                }
            }

            window.requestAnimationFrame(animate)
        }

        animate()
    </script>
</body>

</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

標(biāo)簽：聊城中山阿壩綏化金昌萍鄉(xiāng) 赤峰盤錦

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《5分鐘實(shí)現(xiàn)Canvas鼠標(biāo)跟隨動(dòng)畫(huà)背景》，本文關(guān)鍵詞 5分鐘,實(shí)現(xiàn),Canvas,鼠標(biāo),跟隨,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。