前言
最近看到兩個(gè)好玩的 demo，效果圖如下：
今天趁著周末有空，用 H5 的 Canvas 仿了一下。這篇文章只實(shí)現(xiàn)第一個(gè)效果圖。
這是我實(shí)現(xiàn)的效果：
實(shí)現(xiàn)原理
實(shí)現(xiàn)原理是參考簡(jiǎn)書(shū)的那篇文章，這里不再?gòu)?fù)述。現(xiàn)在我們來(lái)一步一步實(shí)現(xiàn)這樣的效果。
第零步：畫(huà)一個(gè)圓
源碼如下：
運(yùn)行效果如下：
<!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 // 圓中心點(diǎn) x 坐標(biāo) var cy = canvas.height / 2 // 圓中心點(diǎn) y 坐標(biāo) function circle() { ctx.beginPath() ctx.arc(cx, cy, grid / 2, 0, 2 * Math.PI) } circle() ctx.stroke()</script></body></html> 
這個(gè) demo 只涉及 Canvas 最簡(jiǎn)單的用法。
第一步：繪制藍(lán)色的“貼”字
使用 ctx.fillText，在圓的中心繪制一個(gè)藍(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)建了一個(gè)波浪形狀的路徑，和第三步不同的是，這里并沒(méi)有使用 ctx.fill() 填充路徑，而是使用了 ctx.clip() 裁剪路徑，這樣的話，后面繪制的路徑（包括文字）只有在剪裁區(qū)域內(nèi)才能顯示。
為了和背景色區(qū)分開(kāi)來(lái)，我把“貼”字改成紅色。
效果如下：
第四步：繪制運(yùn)動(dòng)的波浪
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()
這樣就能把圓形外面的形狀剪裁掉，然后就大功告成了。
最后，附上完整源碼：
<!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 // 圓中心點(diǎn) x 坐標(biāo) var cy = canvas.height / 2 // 圓中心點(diǎn) y 坐標(biāo) 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>總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)VeVb武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
