如何利用Canvas模仿百度貼吧客戶端loading小球-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)如何利用Canvas模仿百度貼吧客戶端loading小球的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到羅城網(wǎng)站設(shè)計(jì)與羅城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋羅城地區(qū)。

最近看到兩個(gè)好玩的 demo，效果圖如下：

如何利用Canvas模仿百度貼吧客戶端loading小球

今天趁著周末有空，用 H5 的 Canvas 仿了一下。這篇文章只實(shí)現(xiàn)第一個(gè)效果圖。

這是我實(shí)現(xiàn)的效果：

如何利用Canvas模仿百度貼吧客戶端loading小球

實(shí)現(xiàn)原理

實(shí)現(xiàn)原理是參考簡(jiǎn)書的那篇文章，這里不再?gòu)?fù)述?，F(xiàn)在我們來一步一步實(shí)現(xiàn)這樣的效果。

第零步：畫一個(gè)圓

源碼如下：

運(yùn)行效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度貼吧客戶端Loading小球</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d')
    canvas.width = 500
    canvas.height = 500

    var grid = canvas.width / 4
    var cx = canvas.width / 2 // 圓中心點(diǎn) x 坐標(biāo)
    var cy = canvas.height / 2 // 圓中心點(diǎn) y 坐標(biāo)

    function circle() {
        ctx.beginPath()
        ctx.arc(cx, cy, grid / 2, 0, 2 * Math.PI)
    }

    circle()
    ctx.stroke()
</script>
</body>
</html>

如何利用Canvas模仿百度貼吧客戶端loading小球

這個(gè) demo 只涉及 Canvas 最簡(jiǎn)單的用法。

第一步：繪制藍(lán)色的“貼”字

使用 ctx.fillText，在圓的中心繪制一個(gè)藍(lán)色的“帖”字。文字粗體、水平居中。

代碼如下：

function text(fillStyle) {
    var fontSize = size / 250 * 120
    ctx.font = 'bold ' + fontSize + 'px Arial'
    ctx.textAlign = 'center'
    ctx.fillStyle = fillStyle
    ctx.fillText('貼', cx, cy + fontSize * 0.3)
}

text('#29a3fe')

效果如下：

如何利用Canvas模仿百度貼吧客戶端loading小球

第二步：繪制藍(lán)色的波浪

var waveSize = size / 6 // 波浪大小
var x = 0 // 波浪位置偏移大小

function curve() {
    ctx.beginPath()
    ctx.moveTo(cx - size + x + size / 2, cy)
    ctx.quadraticCurveTo(cx - size + size / 4 + x + size / 2, cy - waveSize, cx - size + size / 2 + x + size / 2, cy)
    ctx.quadraticCurveTo(cx - size + size * 3 / 4 + x + size / 2, cy + waveSize, cx - size + size + x + size / 2, cy)

    ctx.quadraticCurveTo(cx + size / 4 + x + size / 2, cy - waveSize, cx + size / 2 + x + size / 2, cy)
    ctx.quadraticCurveTo(cx + size * 3 / 4 + x + size / 2, cy + waveSize, cx + size + x + size / 2, cy)
    ctx.lineTo(cx + size + x + size / 2, canvas.height)
    ctx.lineTo(cx - size + x + size / 2, canvas.height)
    ctx.lineTo(cx - size + x + size / 2, cy)
    ctx.closePath()
}

ctx.fillStyle = '#29a3fe'
curve()
ctx.fill()

效果如下：

如何利用Canvas模仿百度貼吧客戶端loading小球

第三步：繪制白色的“貼”字

curve()
ctx.clip()
text('#f00')

第一句代碼 curve() 創(chuàng)建了一個(gè)波浪形狀的路徑，和第三步不同的是，這里并沒有使用 ctx.fill() 填充路徑，而是使用了 ctx.clip() 裁剪路徑，這樣的話，后面繪制的路徑（包括文字）只有在剪裁區(qū)域內(nèi)才能顯示。

為了和背景色區(qū)分開來，我把“貼”字改成紅色。

效果如下：

如何利用Canvas模仿百度貼吧客戶端loading小球

第四步：繪制運(yùn)動(dòng)的波浪

function loop(){
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    x -= 1.5
    x = x % size

    ctx.save()

    circle()
    ctx.stroke()
 
    ctx.fillStyle = '#29a3fe'
    curve()
    ctx.fill()

    ctx.restore()

    requestAnimationFrame(loop)
}
loop()

效果如下：

如何利用Canvas模仿百度貼吧客戶端loading小球

第五步：整合前面的內(nèi)容

效果如下：

如何利用Canvas模仿百度貼吧客戶端loading小球

第六步：剪裁圓形

把第零步的：

circle()
ctx.stroke()

改成：

circle()
ctx.clip()

這樣就能把圓形外面的形狀剪裁掉，然后就大功告成了。

最后，附上完整源碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body {
            height: 100%;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d')
    canvas.width = 500
    canvas.height = 500

    var size = canvas.width / 4 // 圓的大小
    var cx = canvas.width / 2 // 圓中心點(diǎn) x 坐標(biāo)
    var cy = canvas.height / 2 // 圓中心點(diǎn) y 坐標(biāo)
    var waveSize = size / 6 // 波浪大小
    var x = 0 // 波浪位置偏移大小

    function circle() {
        ctx.beginPath()
        ctx.arc(cx, cy, size / 2, 0, 2 * Math.PI)
    }

    function curve() {
        ctx.beginPath()
        ctx.moveTo(cx - size + x + size / 2, cy)
        ctx.quadraticCurveTo(cx - size + size / 4 + x + size / 2, cy - waveSize, cx - size + size / 2 + x + size / 2, cy)
        ctx.quadraticCurveTo(cx - size + size * 3 / 4 + x + size / 2, cy + waveSize, cx - size + size + x + size / 2, cy)

        ctx.quadraticCurveTo(cx + size / 4 + x + size / 2, cy - waveSize, cx + size / 2 + x + size / 2, cy)
        ctx.quadraticCurveTo(cx + size * 3 / 4 + x + size / 2, cy + waveSize, cx + size + x + size / 2, cy)
        ctx.lineTo(cx + size + x + size / 2, canvas.height)
        ctx.lineTo(cx - size + x + size / 2, canvas.height)
        ctx.lineTo(cx - size + x + size / 2, cy)
        ctx.closePath()
    }

    function text(fillStyle) {
        var fontSize = size / 250 * 120
        ctx.font = 'bold ' + fontSize + 'px Arial'
        ctx.textAlign = 'center'
        ctx.fillStyle = fillStyle
        ctx.fillText('貼', cx, cy + fontSize * 0.3)
    }

    function loop(){
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        x -= 1.5
        x = x % size

        ctx.save()

        circle()
        ctx.clip()

        text('#29a3fe')

        ctx.fillStyle = '#29a3fe'
        curve()
        ctx.fill()

        curve()
        ctx.clip()

        text('#fff')

        ctx.restore()

        requestAnimationFrame(loop)
    }
    loop()
</script>
</body>
</html>

感謝各位的閱讀！關(guān)于“如何利用Canvas模仿百度貼吧客戶端loading小球”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：如何利用Canvas模仿百度貼吧客戶端loading小球-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article46/dpjshg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、用戶體驗(yàn)、全網(wǎng)營(yíng)銷推廣、網(wǎng)頁設(shè)計(jì)公司、企業(yè)網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)

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

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