How to use Canvas to imitate Baidu Tieba client Loading small ball

Author：Eve Cole Update Time：2025-03-06 16:16:01

Foreword

Recently I saw two fun demo, the effect map is as follows:

Today, I was free in the weekend, and used H5 Canvas to imitate it. This article only achieves the first renderings.

This is the effect I achieved:

Implementation principle

The principle of implementation is the article in the book, which is no longer repeated here. Now let's step by step to achieve this effect.

Step in zero: Draw a circle

The source code is as follows:

The running effect is as follows:

 <! Doctype html> <html> <gead> <meta charset = UTF-8> <Title> Baidu Tieba client Loading small ball </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.getConte XT ('2D') Canvas. width = 500 Canvas.Height = 500 VAR Grid = Canvas.width / 4 VAR CX = Canvas.width / 2 // Circle Settlement x coordinates var Cy = Canvas.Height / 2 / / {ctx.beginpath () CTX.ARC (CX, CY, GRID/2, 0, 2 * Math.pi)} Circle () ctx.stroke () </script> </body> </html> </html> </html> </html> </html> </html> </html> </html> </html> </html>

This Demo involves the simplest usage of Canvas.

Step 1: Draw a blue sticker

Use ctx.fillText to draw a blue post in the center of the circle. The text is thick and horizontal.

The code is as follows:

 Function Text (Fillstyle) {var fontsize = size / 250 * 120 ctx.font = 'Bold' + Fontsize + 'PX Arial' CTX.textAlign = 'CTX.FillStyle = Fill STYLE CTX.Filltext ('Patch', CX, Cy + Fontsize * 0.3)} Text ('#29a3fe')

The effect is as follows:

Step 2: Draw a blue wave

 VAR WAVESIZE = SIZE / 6 // Wave size VAR X = 0 // Wave position deviation of the wavy position. ; + size / 2, Cy + WaveSize, CX -SIZE + SIZE + X + SIZE / 2, Cy) CTX.quadraticCurveto (CX + SIZE / 4 + X + SIZE / 2, 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.head) 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 a white sticker

 Curve () ctx.clip () text ('#f00')

The first sentence curve() creates a wave -shaped path. Unlike the third step, there is no use of ctx.fill() to fill the path. Instead, the ctx.clip() cutting path is used. The path drawn later (including text) can only be displayed in the tailoring area.

In order to distinguish with the background color, I changed the stickers to red.

The effect is as follows:

Step 4: Draw the waves of sports

 Function Loop () {ctx.clearrect (0, 0, Canvas.Width, Canvas.Height) x -= 1.5 x = x % Size CTX.Save () CTX.Stroke () CTX.FillStyle = E 'Curve () ctx.fill () ctx.ortore () requestanimationFrame (loop)} loOP ()

The effect is as follows:

Step 5: Integrate the previous content

The effect is as follows:

Step 6: Cutting round

Step in the zero:

 CIRCLE () CTX.Stroke ()

Change to:

 Circle () ctx.clip ()

In this way, the shape of the circular outside can be cut off, and then you can do it.

Finally, attach the complete source code:

 <! Doctype html> <html Lang = EN> <Head> <meta charset = UTF-8> <Title> Title </Title> <STML> 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 // The size of the circle var cx = canvas.width / 2 // The center point x coordinates var cy = canvas.heigh /Height / 2 // Circle center point y coordinates VAR WAVESIZE = SIZE / 6 // Wave size VAR X = 0 // Wave position offset 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 + 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) To (to (to (to (to 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 {Var Fontsize = SIZE = SIZE E / 250 * 120 ctx.font = 'Bold' + Fontsize + 'PX Arial' CTX.TextAlign = 'CENTER' Ctx.fillstyle = Fillstyle CTX.FillText ('Post', CX, Cy + Fontsize * 0.3. )} FUNCTION LOOP () { CTX.CLEARRECT (0, 0, Canvas.Width, Canvas.Height) x -= 1.5 x = x % size ctx.save () ctx.clip () text ('#29a3fe') ctx.fillstyle = ' #29a3fe 'ctx.fill () ctx.fill () ctx.clip () text ('#fff ') ctx.restnimationFrame (loip (loop)} Loop () </body> </html "

Summarize

The above is all the contents of this article. I hope that the content of this article will help everyone's learning or work. If you have any questions, you can leave a message to communicate. Thank you for your support for VEVB Wulin.com.