这篇文章主要给大家介绍了关于利用Canvas模仿百度贴吧客户端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>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上是利用Canvas模仿百度贴吧客户端loading小球的方法的详细内容。更多信息请关注PHP中文网其他相关文章！
H5：如何增强网络上的用户体验Apr 19, 2025 am 12:08 AMH5通过多媒体支持、离线存储和性能优化提升网页用户体验。1）多媒体支持：H5的和元素简化开发，提升用户体验。2）离线存储：WebStorage和IndexedDB允许离线使用，提升体验。3）性能优化：WebWorkers和元素优化性能，减少带宽消耗。
解构H5代码：标签，元素和属性Apr 18, 2025 am 12:06 AMHTML5代码由标签、元素和属性组成：1.标签定义内容类型，用尖括号包围，如。2.元素由开始标签、内容和结束标签组成，如内容。3.属性在开始标签中定义键值对，增强功能，如。这些是构建网页结构的基本单位。
了解H5代码：HTML5的基本原理Apr 17, 2025 am 12:08 AMHTML5是构建现代网页的关键技术，提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等，增强了网页结构和SEO。2.支持多媒体元素和，无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性，简化了验证过程。4.提供了离线和本地存储功能，提升了网页性能和用户体验。
H5代码：Web开发人员的最佳实践Apr 16, 2025 am 12:14 AMH5代码的最佳实践包括：1.使用正确的DOCTYPE声明和字符编码；2.采用语义化标签；3.减少HTTP请求；4.使用异步加载；5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。
H5：网络标准和技术的发展Apr 15, 2025 am 12:12 AMWeb标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能，使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。
H5是HTML5的速记吗？探索细节Apr 14, 2025 am 12:05 AMH5不仅仅是HTML5的简称，它代表了一个更广泛的现代网页开发技术生态：1.H5包括HTML5、CSS3、JavaScript及相关API和技术；2.它提供更丰富、互动、流畅的用户体验，能在多设备上无缝运行；3.使用H5技术栈可以创建响应式网页和复杂交互功能。
H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AMH5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。
H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AMH5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
SublimeText3汉化版
中文版，非常好用
Dreamweaver Mac版
视觉化网页开发工具
Atom编辑器mac版下载
最流行的的开源编辑器
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
