這篇文章給大家分享的是有關(guān)如何利用Canvas模仿百度貼吧客戶端loading小球的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
站在用戶的角度思考問題，與客戶深入溝通，找到羅城網(wǎng)站設(shè)計與羅城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站建設(shè)、
網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、
域名申請、
網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋羅城地區(qū)。
最近看到兩個好玩的 demo，效果圖如下：
今天趁著周末有空，用 H5 的 Canvas 仿了一下。這篇文章只實現(xiàn)第一個效果圖。
這是我實現(xiàn)的效果：
實現(xiàn)原理
實現(xiàn)原理是參考簡書的那篇文章，這里不再復(fù)述?，F(xiàn)在我們來一步一步實現(xiàn)這樣的效果。
第零步：畫一個圓
源碼如下：
運行效果如下：
百度貼吧客戶端Loading小球
這個 demo 只涉及 Canvas 最簡單的用法。
第一步：繪制藍(lán)色的“貼”字
使用 ctx.fillText，在圓的中心繪制一個藍(lán)色的“帖”字。文字粗體、水平居中。
代碼如下：
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')效果如下：
第二步：繪制藍(lán)色的波浪
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() 創(chuàng)建了一個波浪形狀的路徑，和第三步不同的是，這里并沒有使用 ctx.fill() 填充路徑，而是使用了 ctx.clip() 裁剪路徑，這樣的話，后面繪制的路徑（包括文字）只有在剪裁區(qū)域內(nèi)才能顯示。
為了和背景色區(qū)分開來，我把“貼”字改成紅色。
效果如下：
第四步：繪制運動的波浪
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()效果如下：
第五步：整合前面的內(nèi)容
效果如下：
第六步：剪裁圓形
把第零步的：
circle()
ctx.stroke()
改成：
circle()
ctx.clip()
這樣就能把圓形外面的形狀剪裁掉，然后就大功告成了。
最后，附上完整源碼：
Title
重慶分公司
重慶分公司