作者:泽儿0818_833 | 来源:互联网 | 2020-09-03 11:41
这篇文章主要给大家介绍了关于利用Canvas模仿百度贴吧客户端loading小球的实现方法,实现后的相关非常相似,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考价值,需要的朋友们来一起学习学习吧。
这篇文章主要给大家介绍了关于利用Canvas模仿百度贴吧客户端loading小球的实现方法,实现后的相关非常相似,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考价值,需要的朋友们来一起学习学习吧。
前言
最近看到两个好玩的 demo,效果图如下:
实现原理
实现原理是参考简书的那篇文章,这里不再复述。现在我们来一步一步实现这样的效果。
第零步:画一个圆
源码如下:
运行效果如下:
这个 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()
这样就能把圆形外面的形状剪裁掉,然后就大功告成了。
最后,附上完整源码:
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!