利用Canvas模仿百度贴吧客户端loading小球的方法示例
发布时间：2017-08-13 17:23:57 作者：小陈博客 
我要评论
我要评论这篇文章主要给大家介绍了关于利用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>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
html5结合Canvas实现发光进度条loading动画特效源码
html5结合Canvas实现发光进度条loading动画特效源码是一段实现了loading进度条在加载的过程中持续发光的效果代码，本段代码适应于所有网页使用，有兴趣的朋友们欢迎前来下2017-04-20
HTML5结合Canvas制作的圆形百分比进度条Loading效果源码
是一段实现了圆形百分比进度条Loading效果代码，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用2016-06-15
HTML5基于Canvas实现超酷Loading动画特效源码
这次我们来看一款非常酷的Loading动画加载效果，主要是利用几何的特性来模拟的，它是一款旋转的动画效果。可实现伸缩旋转的视觉效果2014-12-23
HTML5 Canvas绘制超级漂亮的发光Loading动画
HTML5 Canvas相当于一个画板，你可以在Canvas绘制任意的东西，今天要分享一款利用HTML5 Canvas绘制的loading动画效果，非常的漂亮2015-12-09
HTML5 Canvas实现的发光Loading动画特效源码
这是一款基于HTML5 Canvas实现的发光Loading加载动画特效源码。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果2014-07-04
最新评论