如何利用帆布模仿百度贴吧客户端加载小球

　　介绍

这篇文章给大家分享的是有关如何利用帆布模仿百度贴吧客户端加载小球的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

最近看到两个好玩的演示,效果图如下:

如何利用帆布模仿百度贴吧客户端加载小球

如何利用帆布模仿百度贴吧客户端加载小球

今天趁着周末有空,用H5的帆布仿了一下。这篇文章只实现第一个效果图。

<强>这是我实现的效果:

如何利用帆布模仿百度贴吧客户端加载小球

<强>实现原理

实现原理是参考简书的那篇文章,这里不再复述。现在我们来一步一步实现这样的效果。

<强>第零步:画一个圆

源码如下:

运行效果如下:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; title>百度贴吧客户端加载小球& lt;/title> 　　,,,& lt; style> 　　,,,,,,,canvas  { 　　,,,,,,,,,,,边界:,1 px  solid  # ccc; 　　,,,,,,,} 　　,,,& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; canvas  id=癱anvas",宽度=?00“,身高=?00“祝辞& lt;/canvas> 　　& lt; script> 　　,,,var  canvas =, . getelementbyid(& # 39;帆布# 39;) 　　,,,var  ctx =, canvas.getContext (& # 39; 2 d # 39;) 　　,,,canvas.width =500 　　,,,canvas.height =500 　　 　　,,,var  grid =canvas.width /, 4 　　,,,var  cx =, canvas.width /, 2,//,圆中心点,x 坐标 　　,,,var  cy =, canvas.height /, 2,//,圆中心点,y 坐标 　　 　　,,,function 圆(),{ 　　,,,,,,,ctx.beginPath () 　　,,,,,,,ctx.arc (cy,残雪,还以为,grid /,,,,, 2, *, Math.PI) 　　,,,} 　　 　　,,,圆() 　　,,,ctx.stroke () 　　& lt;/script> 　　& lt;/body> 　　& lt;/html>

如何利用帆布模仿百度贴吧客户端加载小球

这个演示只涉及帆布最简单的用法。

<强>第一步:绘制蓝色的“贴”字

使用<代码> ctx。fillText>

代码如下:

function 文本(fillStyle), { 　　,,,var  fontSize =, size /, 250 * 120 (,) 　　,,,ctx.font =, & # 39; bold  & # 39;, +, fontSize  +, & # 39; px  arial # 39; 　　,,,ctx.textAlign =, & # 39;中心# 39; 　　,,,ctx.fillStyle =fillStyle 　　,,,ctx.fillText(& # 39;贴& # 39;,,残雪,,cy  +, fontSize  *, 0.3) 　　} 　　 　　文本(& # 39;# 29 a3fe& # 39;)

效果如下:

如何利用帆布模仿百度贴吧客户端加载小球

<强>第二步:绘制蓝色的波浪

var  waveSize =, size /, 6,//,波浪大小 　　var  x =, 0,//,波浪位置偏移大小 　　 　　function 曲线(),{ 　　,,,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) 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

如何利用帆布模仿百度贴吧客户端加载小球