前言

几天前在简书上看到在一篇文章《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. SICP-Elements of program

    编程语言=组合简单形成复杂的工具 简单的声明和表达式 简单元素之间的组合方式 组合后元素的抽象方式 程序=数据+函数 数据是我们要处理的内容 函数是我们处理数据的方式 函数式与中缀式 函数式不会出现歧 ...

  2. ecshop商品页增加编辑器fckeditor

    最近在做ecshop的项目,需要在商品单页中增加一项FCKEditor的文本编辑器,但在ecshop的论坛和百度里搜出的方法,试了好几个都没有用,终于找到一个可以正确使用的,和大家分享. ecshop ...

  3. js验证input是否输入数字

    onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execComma ...

  4. 7.java的请求转发和请求重定向

    1.请求重定向:是客户端的行为,response.sendRedirect(),从本质上讲等同于两次请求,前一次的请求对象不会保存,地址栏的URL地址会改变,一次新的转发. 2.请求转发:是服务器的行 ...

  5. 2.Smarty的引入和实例化

    1.把demo和lib复制出来,并且创建一个test文件夹作为工作的目录 如图所示: 2.这是libs里面的内容,其中smarty.class.php包含了smarty各种方法和功能,需要实例化它还工 ...

  6. Unity 游戏框架搭建 (四) 简易有限状态机

    为什么用有限状态机?   之前做过一款跑酷游戏,跑酷角色有很多状态:跑.跳.二段跳.死亡等等.一开始是使用if/switch来切换状态,但是每次角色添加一个状态(提前没规划好),所有状态处理相关的代码 ...

  7. javaScript事件绑定

    事件绑定,就是要对某一个东西进行操作.(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!) 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函 ...

  8. （转载）Oracle10g 数据泵导出命令 expdp 使用总结(三)

    原文链接:http://hi.baidu.com/edeed/item/19aa0df856da3e19a6298894 Oracle10g 数据泵导出命令 expdp 使用总结(一) 14. JOB ...

  9. bcp和load table

    使用BCP和LOAD TABLE联合完成Sybase IQ 的数据导出和导入工作.说明: 表(视图)GN_TEST只有两个字段,TIMEID和MSISDN, 导出时我用'|'作为字段分隔符,'& ...

  10. 流行框架angular

    ---恢复内容开始--- 一.angular是什么 一款非常优秀的前端高级js框架,由谷歌团队负责开发 angular是通过新的属性和表达扩展了html angular可以构建一个单一页面应用程序(s ...