This article mainly introduces to you the implementation method of using Canvas to imitate Baidu Tieba client loading ball. The correlation after implementation is very similar. The article gives detailed sample code for your reference and study, which has certain benefits for everyone. It has reference value. Friends who need it can come and study together.
Preface
I recently saw two interesting demos, the renderings are as follows:
Today I took advantage of the free time on the weekend and imitated it using H5 Canvas. This article only implements the first rendering.
This is the effect I achieved:
Principle of implementation
The implementation principle is based on the article in the brief book and will not be repeated here. Now let's achieve this effect step by step.
Step 0: Draw a circle
The source code is as follows:
The running effect is as follows:
<!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>
This demo only involves the simplest usage of Canvas.
Step 1: Draw the blue word "Post"
Use ctx.fillText
to draw a blue in the center of the circle The word "post". Text is bold and centered horizontally.
The code is as follows:
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')
The effect is as follows:
Step 2: Draw blue waves
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()
The effect is as follows:
# #Step 3: Draw the white word "sticker"
curve() ctx.clip() text('#f00')
curve() creates a The difference between the wavy path and the third step is that
ctx.fill() is not used to fill the path, but
ctx.clip() is used to clip the path, so If so, the path drawn later (including text) can only be displayed within the clipping area.
Step 4: Draw moving waves
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()
Step 5: Integrate the previous content
The effect is as follows:Step 6: Cut the circle
Put the step 0: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>
html5 uses html2canvas to implement browser screenshots
HTML5 canvas drawing five-pointed star method
html5 uses canvas to achieve the flame effect that follows the cursor
The above is the detailed content of Use Canvas to imitate the method of loading small balls on Baidu Tieba client. For more information, please follow other related articles on the PHP Chinese website!