前言
最近看到两个好玩的 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使用html2canvas实现浏览器截图
html5 canvas绘制五角星的方法
html5使用canvas实现跟随光标跳动的火焰效果
以上就是利用canvas模仿百度贴吧客户端loading小球的方法的详细内容。