应用Canvas摹仿baidu贴吧客户端loading小球的办法-

这篇文章主要给大家介绍了对于应用Canvas摹仿baidu贴吧客户端loading小球的实现办法，实现后的相干非常类似，文中给出了细致的示例代码供大家参照 学习，对大家拥有一定的参照 价值，需要的伴侣们来一起学习学习吧。 这篇文章主要给大家介绍了对于应用Canvas摹仿baidu贴吧客户端loading小球的实现办法，实现后的相干非常类似，文中给出了细致的示例代码供大家参照 学习，对大家拥有一定的参照 价值，需要的伴侣们来一起学习学习吧。

前言

比来看到两个好玩的 demo，结果图如下：

实现道理

实现道理是参照 简书的那篇文章，这里不再复述。此刻我们来一步一步实现这样的结果。

第零步：画一个圆

源码如下：

运转结果如下：

    
    
    



《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 // 圆核心点 x 坐标
    var cy = canvas.height / 2 // 圆核心点 y 坐标

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

    circle()
    ctx.stroke()
《script》

这个 demo 只波及 Canvas 最简略的用途。

首先步：绘制蓝色的“贴”字

运用 ctx.fillText，在圆的核心绘制一个蓝色的“帖”字。文字粗体、水平居中。

代码如下：

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')

结果如下：

第二步：绘制蓝色的波纹

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()

结果如下：

第三步：绘制白色的“贴”字

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

首先句代码 curve() 新建了一个波纹外形的途径，和第三步不一样的是，这里并没有运用 ctx.fill() 添补途径，而是运用了 ctx.clip() 裁剪途径，这样的话，背面绘制的途径（包含文字）只要在剪裁区域内才干显示。

为了和配景色区分开来，我把“贴”字改成红色。

结果如下：

第四步：绘制运动的波纹

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()

结果如下：

第六步：剪裁圆形

把第零步的：

circle()
ctx.stroke()

改成：

circle()
ctx.clip()

这样就能把圆形外面的外形剪裁掉，然后就大功告成了。

最后，附上完备源码：

    
    
    



《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 // 圆核心点 x 坐标
    var cy = canvas.height / 2 // 圆核心点 y 坐标
    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》

以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相干内容请关注百分百源码网！