前言

几天前在简书上看到在一篇文章《Android仿百度贴吧客户端Loading小球》，看了一下作者，他写了两个好玩的 demo，效果图如下：

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

这是我实现的效果：

实现原理

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

第零步：画一个圆

源码如下：

<!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>

运行效果如下：

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

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

最后，附上完整源码：

<!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 小球的更多相关文章

  1. 在Android上仿百度贴吧客户端Loading图标小球

    封面 前言 使用百度贴吧客户端的时候发发现加载的小动画挺有意思的,于是自己动手写写看.想学习自定义View以及自定义动画的小伙伴一定不要错过哦. 读者朋友需要有最基本的canvas绘图功底,比如画笔P ...

  2. 仿百度壁纸客户端（六）——完结篇之Gallery画廊实现壁纸预览已经项目细节优化

    仿百度壁纸客户端(六)--完结篇之Gallery画廊实现壁纸预览已经项目细节优化 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度 ...

  3. 仿百度壁纸客户端（五）——实现搜索动画GestureDetector手势识别，动态更新搜索关键字

    仿百度壁纸客户端(五)--实现搜索动画GestureDetector手势识别,动态更新搜索关键字 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Frag ...

  4. 仿百度壁纸客户端（二）——主页自定义ViewPager广告定时轮播图

    仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...

  5. 仿百度壁纸客户端（一）——主框架搭建,自定义Tab+ViewPager+Fragment

    仿百度壁纸客户端(一)--主框架搭建,自定义Tab+ViewPager+Fragment 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment ...

  6. 高仿百度传课应用客户端源码iOS版

    高仿百度传课iOS版,版本号:2.4.1.2 运行环境:xcode6.3  ios8.3 (再往上系统没有测试) 转载请注明出处,不可用于商业用途及不合法用途. 如果你觉得不错,欢迎  star  哦 ...

  7. WPF仿百度Echarts人口迁移图

    GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...

  8. 仿优酷Android客户端图片左右滑动（自动滑动）

    最终效果: 页面布局main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayou ...

  9. 【原创】jQuery 仿百度输入标签插件

    1.先上效果图 2.调用方式 <link href="/Styles/tagsinput.css" rel="stylesheet" type=" ...

随机推荐

  1. WCF入门的了解准备工作

    了解WCF, 及WCF入门需要掌握哪里基本概念? 1.准备工作 >1.1 . XML >1.2 . Web Service >1.3 . 远程处理 (RPC) >1.4.  消 ...

  2. GA代码中的细节

    GA-BLX交叉-Gaussion变异 中的代码细节: 我写了一个GA的代码,在2005测试函数上一直不能得到与实验室其他同学类似的数量级的结果.现在参考其他同学的代码,发现至少有如下问题: 1.在交 ...

  3. kaggle

    注册kaggle可真所谓费劲心思,先是邮箱验证不来,换了两三个浏览器都不成功,非常恼火,没有验证码,最后还是FQ加谷歌浏览器,哎,注册之旅还是非常坎坷德,但是好消息是注册成功了.接下来是机器学习语言, ...

  4. 开发中关于IPv6的问题

    问题: 报错信息如下 [root@kube-master iemp]# kubectl logs equipment-139404108-7mc14 -n iemp2017-05-27 05:41:0 ...

  5. Java垃圾回收总结

    基本概念 垃圾回收器(Garbage Collector )是JVM非常重要的一个组成部分,主要用于自动化的内存管理.相比手动的内存管理,自动化的内存管理大大简化了程序员的开发难度并且更加安全,避免了 ...

  6. Android 设计模式实战之关于封装计费代码库的策略模式详谈

    写在之前 这周生活上出现了很多的不如意,从周一开始就觉得哪里出现了问题,然后就是各种烦躁的情绪,后来事情还真是如预感的那样发生了,很是心痛,但也无可奈何,希望大家都好好珍惜自己身边的人:友人,亲人,家 ...

  7. [leetcode-553-Optimal Division]

    Given a list of positive integers, the adjacent integers will perform the float division. For exampl ...

  8. AJAX数据请求

    ajax数据请求需要四个步骤:(请求文本内容) 1.创建XMLHttpRequest对象: 2.打开与服务起的链接: 3.发送给服务器: 4.响应就绪. <!DOCTYPE html> & ...

  9. HTML5 LocalStorage 本地存储总结

    存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"] ...

  10. 《javascript 高级程序设计》笔记

    1-4章 1.变量①.ECMAScript 变量是松散类型的,也就是说可以用来保存任何类型的数据.换句话说每个变量仅仅是一个用于保存值的占位符.②.如果在函数中使用var定义一个变量,那么这个变量在函 ...