如何利用Canvas模仿百度贴吧客户端loading小球-创新互联

这篇文章给大家分享的是有关如何利用Canvas模仿百度贴吧客户端loading小球的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

站在用户的角度思考问题，与客户深入沟通，找到罗城网站设计与罗城网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广、域名申请、网站空间、企业邮箱。业务覆盖罗城地区。

最近看到两个好玩的 demo，效果图如下：

如何利用Canvas模仿百度贴吧客户端loading小球

如何利用Canvas模仿百度贴吧客户端loading小球

今天趁着周末有空，用 H5 的 Canvas 仿了一下。这篇文章只实现第一个效果图。

这是我实现的效果：

如何利用Canvas模仿百度贴吧客户端loading小球

实现原理

实现原理是参考简书的那篇文章，这里不再复述。现在我们来一步一步实现这样的效果。

第零步：画一个圆

源码如下：

运行效果如下：

<!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 // 圆中心点 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>
</body>
</html>

如何利用Canvas模仿百度贴吧客户端loading小球

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

效果如下：

如何利用Canvas模仿百度贴吧客户端loading小球

第二步：绘制蓝色的波浪

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() 创建了一个波浪形状的路径，和第三步不同的是，这里并没有使用 ctx.fill() 填充路径，而是使用了 ctx.clip() 裁剪路径，这样的话，后面绘制的路径（包括文字）只有在剪裁区域内才能显示。

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

效果如下：

如何利用Canvas模仿百度贴吧客户端loading小球

第四步：绘制运动的波浪

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小球

第五步：整合前面的内容

效果如下：

如何利用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 // 圆中心点 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>
</body>
</html>

感谢各位的阅读！关于“如何利用Canvas模仿百度贴吧客户端loading小球”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章题目：如何利用Canvas模仿百度贴吧客户端loading小球-创新互联
文章URL：https://www.cdcxhl.com/article46/dpjshg.html

成都网站建设公司_创新互联，为您提供微信公众号、用户体验、全网营销推广、网页设计公司、企业网站制作、移动网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

成都app开发公司

网站建设知识

同城分类信息