Canvas 仿百度貼吧客戶端 loading 小球

時間 2019-12-04

標籤 canvas 百度貼吧客戶端 loading 小球简体版

原文原文鏈接

前言

幾天前在簡書上看到在一篇文章《Android仿百度貼吧客戶端Loading小球》，看了一下做者，他寫了兩個好玩的 demo，效果圖以下：javascript

今天趁着週末有空，用 H5 的 Canvas 仿了一下。這篇文章只實現第一個效果圖。
這是我實現的效果：css

實現原理

實現原理是參考簡書的那篇文章，這裏再也不復述。如今咱們來一步一步實現這樣的效果。html

第零步：畫一個圓java

源碼以下：django

<!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 // 圓中心點 x 座標 var cy = canvas.height / 2 // 圓中心點 y 座標 function circle() { ctx.beginPath() ctx.arc(cx, cy, grid / 2, 0, 2 * Math.PI) } circle() ctx.stroke() </script> </body> </html>

運行效果以下：canvas

這個 demo 只涉及 Canvas 最簡單的用法。oop

第一步：繪製藍色的「貼」字ui

使用 ctx.fillText，在圓的中心繪製一個藍色的「帖」字。文字粗體、水平居中。spa

代碼以下：3d

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()

這樣就能把圓形外面的形狀剪裁掉，而後就大功告成了。

最後，附上完整源碼：

<!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 // 圓中心點 x 座標 var cy = canvas.height / 2 // 圓中心點 y 座標 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。