如何利用Canvas模仿百度贴吧客户端loading小球-创新互联
这篇文章给大家分享的是有关如何利用Canvas模仿百度贴吧客户端loading小球的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
站在用户的角度思考问题,与客户深入沟通,找到罗城网站设计与罗城网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广、域名申请、网站空间、企业邮箱。业务覆盖罗城地区。最近看到两个好玩的 demo,效果图如下:
今天趁着周末有空,用 H5 的 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')
效果如下:
第二步:绘制蓝色的波浪
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()
这样就能把圆形外面的形状剪裁掉,然后就大功告成了。
最后,附上完整源码:
Title
感谢各位的阅读!关于“如何利用Canvas模仿百度贴吧客户端loading小球”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
名称栏目:如何利用Canvas模仿百度贴吧客户端loading小球-创新互联
网站地址:http://myzitong.com/article/dpjshg.html