利用Canvas模仿百度贴吧客户端loading小球的方法示例


Posted in HTML / CSS onAugust 13, 2017

前言

最近看到两个好玩的 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>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。
 

HTML / CSS 相关文章推荐
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
css3 选择器
May 11 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 #HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 #HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 #HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 #HTML / CSS
前端面试必备之html5的新特性
Sep 05 #HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 #HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 #HTML / CSS
You might like
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python getopt 参数处理小示例
2009/06/09 Python
Python import用法以及与from...import的区别
2015/05/28 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
开学第一天的感想
2015/08/10 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
k-means & DBSCAN 总结
2021/04/27 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫