Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use canvas to draw broken-line path animation, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

If you use canvas to draw, the difficulty is:

Need to calculate the subpath, this calculation is more complex. (of course it's achievable.)

The calculation of the gradient, as can be seen from the figure, the subpath of the animation has a gradient effect, and it is also very complicated to calculate the gradient in segments.

Draw a gray path

The code for drawing the path is relatively simple, which is not described in detail here. The following code simulates the drawing of a broken line path:

Ctx.beginPath (); ctx.moveTo (100100); ctx.lineTo (200100); ctx.lineTo (230200); ctx.lineTo (250 Magazine 50); ctx.lineTo (270180); ctx.lineTo (300 focus 60); ctx.lineTo (330160); ctx.lineTo (350 grade 60); ctx.lineTo (380100); ctx.lineTo (480100); ctx.strokeStyle = "gray"; ctx.lineJoin = "round"; ctx.stroke (); draw bright color path

The code for drawing a bright color path is the same as the code for drawing a gray path, except that the style is a bright color:

Ctx.save (); ctx.beginPath (); ctx.moveTo (100100); ctx.lineTo (200100); ctx.lineTo (230200); ctx.lineTo (250j 50); ctx.lineTo (270180); ctx.lineTo (300je 60); ctx.lineTo (330160); ctx.lineTo (350 jade 60) Ctx.lineTo (380100); ctx.lineTo (480100); ctx.strokeStyle = "gray"; ctx.lineJoin = "round"; ctx.stroke (); clip controls the drawing area of the bright color path

The clip method of canvas can control the area you draw, and by this method, you can control part of the intelligent drawing path:

Ctx.beginPath (); ctx.rect (offset,0100500); / / offset equals 0 ctx.clip ();... Ctx.stroke ()

After clip, only part of the bright color path will be drawn

Animation effect

The moving effect of the bright color path of the main road can be achieved by constantly changing the value of offset. The code is as follows:

Offset + = 2; if (offset > 600) {offset = 100;} requestAnimationFrame (animate); gradient

We know that gradients cannot follow any path, and it is troublesome to calculate gradients in segments if you calculate the broken line. In fact, in this case, although it is a broken line, the overall direction of motion is always from left to right, so a gradient from left to right can be used to approximate the simulation:

Function createGradient (ctx,x0,y0,x1,y1) {var grd = ctx.createLinearGradient; grd.addColorStop (0recorder 129ab3'); grd.addColorStop (1, "# 19b5fe"); return grd;} ctx.strokeStyle = createGradient (ctx,offset,0,offset + 100Power0)

All codes:

Line animate canvas {border: 1px solid # 000;} var ctx = document.getElementById ('canvas'). GetContext (' 2d'); var w = canvas.width, h = canvas.height; var x = w / 2memy = h / 2 Function setupCanvas (canvas) {let width = canvas.width, height = canvas.height, dpr = window.devicePixelRatio | | 1.0; if (dpr! = 1.0) {canvas.style.width = width + "px"; canvas.style.height = height + "px"; canvas.height = height * dpr Canvas.width = width * dpr; ctx.scale (dpr, dpr);}} setupCanvas (canvas); var offset = 100; function createGradient (ctx,x0,y0,x1,y1) {var grd = ctx.createLinearGradient Return grd;} function animate () {ctx.fillStyle = "black"; ctx.fillRect; ctx.lineWidth = 3; ctx.save (); ctx.beginPath (); ctx.moveTo (100100); ctx.lineTo (200100) Ctx.lineTo (230200); ctx.lineTo (250jue 50); ctx.lineTo (270180); ctx.lineTo (300Power60); ctx.lineTo (330160); ctx.lineTo (350Lce60); ctx.lineTo (380100); ctx.lineTo (480100); ctx.strokeStyle = "gray"; ctx.lineJoin = "round" Ctx.stroke (); ctx.beginPath (); ctx.rect (offset,0150500); ctx.clip (); ctx.beginPath (); ctx.moveTo (100100); ctx.lineTo (200100); ctx.lineTo (230200); ctx.lineTo (250); ctx.lineTo (270180) Ctx.lineTo (300); ctx.lineTo (330160); ctx.lineTo (350); ctx.lineTo (380100); ctx.lineTo (480100); ctx.lineWidth = 4; ctx.strokeStyle = createGradient (ctx,offset,0,offset + 150); ctx.lineCap = "round"; / / ctx.globalCompositeOperation = 'lighter' Ctx.lineJoin = "round"; ctx.stroke (); ctx.restore (); offset + = 2; if (offset > 600) {offset = 100;} requestAnimationFrame (animate);} animate () The above is all the content of this article "how to use canvas to draw broken-line path animation". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.