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

This article mainly introduces how to realize the movement of light along an irregular path. Html5 canvas implementation case sharing! Has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand.

Svg makes the animation move along an irregular path

After consulting svg documents, it is found that there are two ways to realize svg animation motion, both of which are very simple, but there is a great distance for 100% to achieve the effect given by the designer.

Use the offset-path offset path and the offset-roate offset angle to make the element follow an irregular path:

Offset-path/offset-roate * {padding: 0; margin: 0; box-sizing: border-box;} body {background: # 000 } .line {width: 80px; height: 3px; position: absolute; background: red Offset-path: path ("M10 80 L 77.5 60 L 145 80 L 280 100 L 500 80 L 600 120 L 800 80 L 950 120 L 950 200 L 930 250 L 950 300 L 950 500"); animation: move 10s linear infinite } @ keyframes move {100% {offset-distance: 2000px;}} .line1 {position: absolute; left: 100px Width: 20px; height: 20px; border-radius: 50%; background: red; offset-path: path ("M0Magneol 0a72.5, 0a72.5, 0a72.5, 0a72.5, 0a72.5, and 0a72.5, 0a72.5, 0-145); offset-rotate: 0deg Animation: load 1.8s cubic-bezier (0.86,0,0.07,1) infinite; animation-delay: 0.147s; animation-fill-mode: forwards;} @ keyframes load {from {offset-distance: 0 } to {offset-distance: 100%;}} path offset Angle offset

The limitation of this approach is that scrolling elements cannot change irregularly with the path.

Use stroke-dasharray and stroke-dashoffset to make the edge of the path move

Stroke-dasharray: sets the interval between the solid line length and the solid line length of the shap and text border dashed lines (dashed line length)

Stroke-dashoffser: sets the offset of the border lines from the default position (positive values: left, negative values: right):

Stroke-dasharray/stroke-dashoffser * {padding: 0; margin: 0; box-sizing: border-box;} body {background: # 000 Color: # fff;} .move {animation: moving 5s infinite;} @ keyframes moving {0% {stroke-dashoffset: 80px } 100% {stroke-dashoffset:-1600px }} set stroke-dasharray storke-dasharray to 80, and the storke-dasharray is set to 80320 at the same interval between solid lines and solid lines. At this time, the solid line and the solid line interval 1 move 4 set stroke-dashoffset to offset the edge line relative to the initial position by setting stroke-dasharray and stroke-dashoffset to make the edge line move.

In this way, the rolling line following the path can be set through the effect of border offset, but the light effect of the line can not be set, that is, the shadow of the solid line and the gradient effect of the solid line (the gradient area needs to change with the offset path).

Realization of irregular path Motion of Line delay by canvas

Line realization

For irregular paths, if the light is realized directly by drawing lines, it is necessary to calculate the position of each start point and end point, and there may be a turning point in the middle, which is very troublesome and undesirable.

Therefore, the mode of canvas combined graphics is adopted here, and the overlapping part of the line and a figure (similar to the lampshade) is taken to achieve the light effect.

Before assembling

After combination

Canvas achieves irregular path light efficiency body {background: # 000;} # wrap {position: absolute; width: 1200px Height: 600px} var path ='M 10 80 L 77.5 60 L 145 80 L 280 100 L 500 80 L 600 120 L 800 80 L 950 120 L 950 200 L 930 250 L 950 300 L 950 500' Var list = path.match (/ ([Amurz] ([^ Amurz]) {1,}) / g) .map (item = > {return {x: item.split ('') [1], y: item.split (') [2] Action: item.split ('') [0],}}) / / get the position of each point var canvas = document.getElementById ('canvas'); var ctx = canvas.getContext (' 2d'); ctx.strokeStyle = 'rgba (255pyrone); function drawPath () {ctx.lineWidth = 3; ctx.beginPath () List.forEach (item = > {if (item.action = ='M') ctx.moveTo (item.x, item.y); if (item.action = ='L') ctx.lineTo (item.x, item.y);}); ctx.stroke () } drawPath (); function drawLine () {/ / sets the graphic combination mode default source-over ctx.globalCompositeOperation = "destination-in"; ctx.lineWidth = 60; ctx.beginPath () Ctx.moveTo (40,80); ctx.lineTo (200,80); ctx.stroke ();} drawLine ()

Let the lines move.

When we achieve a good line, we need to make the line move, because the line is realized through the lampshade, to make the line move only needs to make the lamp cover move.

Canvas achieves irregular path light efficiency body {background: # 000;} # wrap {position: absolute; width: 1200px Height: 600px} var path ='M 10 80 L 77.5 60 L 145 80 L 280 100 L 500 80 L 600 120 L 800 80 L 950 120 L 950 200 L 930 250 L 950 300 L 950 500' Var list = path.match (/ ([Amurz] ([^ Amurz]) {1,}) / g) .map (item = > {return {x: item.split ('') [1], y: item.split (') [2] Action: item.split ('') [0],}}) / / get the location of each point var step = 3; var x1, x2, y1, y2 rgba. / determine the maximum and minimum point in the path var timer; var canvas = document.getElementById ('canvas'); var ctx = canvas.getContext (' 2d'); ctx.strokeStyle = 'rgba (255pc255) Ctx.shadowColor = 'rgba'; ctx.lineCap = 'round'; ctx.shadowBlur = 3; list.forEach (item = > {x1 =! x1 | | Number (item.x))

< x1 ? Number(item.x) : x1; y1 = !y1 || Number(item.y) < y1 ? Number(item.y) : y1; x2 = !x2 || Number(item.x) >

X2? Number (item.x): x2; y2 =! Y2 | | Number (item.y) > y2? Number (item.y): Y2;}); function drawPath () {ctx.lineWidth = 3; ctx.beginPath (); list.forEach (item = > {if (item.action = ='M') ctx.moveTo (item.x, item.y) If (item.action = ='L') ctx.lineTo (item.x, item.y);}); / / add var grd = ctx.createLinearGradient (arrLine [arrLine.length-1] .x, arrLine [arrLine.length-1] .y, arrLine [0] .x, arrLine [0] .y) Grd.addColorStop (0, 'rgba (255,255,255,0)'); / / define the start color of the gradient grd.addColorStop (1, 'rgba (255,255,255,1)'); / / define the color of the end of the gradient ctx.strokeStyle = grd; ctx.stroke () } / / Design an appropriate initial line state var arrLine = Array (10) .fill (0). Map ((item, inx) = > {return {x: x1-20 * inx, y: Y1 + 30 }) / / the graph path function getArrLine () {var isEnd arrLine = arrLine.map (item = > {var x = item.x; var y = item.y; if (x)

< x2 - 30) { x = x + step >

X2-30? X2-30: X + step;} else if (x = = x2-30 & & y

< y2) { y = y + step >

Y2? Y2: y + step;} else {isEnd = true } return {x, y}}) IsEnd & & timer & & cancelAnimationFrame (timer);} / drawing function drawLine () {/ / set graphic combination default source-over ctx.globalCompositeOperation = "destination-in"; ctx.lineWidth = 70 Ctx.beginPath (); arrLine.forEach ((item, inx) = > {if (inx = = 0) {ctx.moveTo (item.x, item.y) } else {ctx.lineTo (item.x, item.y);}}) ctx.stroke () } function start () {ctx.clearRect (0,0,600); ctx.globalCompositeOperation = 'source-over'; drawPath (); drawLine (); getArrLine () Timer = requestAnimationFrame (start);} timer = requestAnimationFrame (start)

This implementation also has some limitations, that is, the path can be abstracted into a regular pattern or line, for example, the path in the above demo can be abstracted into two sides of a rectangle, or two connected lines.

We must abstract a general rule from a path that has no specific rules, and different path rules are different.

The above example is to abstract an irregular path into a regular path at a right angle.

Optimization point

We found two points that can be optimized here.

1. In the direction of time: in order to reduce the consumption of animation, the timer in the code has used requestAnimationFrame, but because of the particularity of the light (with its own blur effect), in order to improve the performance, we try to call requestAnimationFrame twice and draw once, and the effect is not significantly different from that of the former.

two。 Drawing direction: as can be found from the above picture, the lampshade only circles part of the path at a time, so it is not necessary to draw all the paths every time, just find out the path points before and after the lampshade and draw this section of the path.

Pit spot

After completing this animation effect, I encountered a hitherto unknown bug, with longer screen placement time, slower animation, open the task manager, no memory leaks or cpu usage is too high. When I open performance, I find that the framing of the page is serious, the number of frames on the screen is getting lower and lower, and a single Frame CPU time is getting longer and longer. in terms of range, script and render and paint do not have a linear change, only system time is getting longer and longer, and I expect to be told why by the boss.

Thank you for reading this article carefully. I hope the editor shared "how to realize the movement of light along an irregular path? html5 canvas to achieve case sharing!" This article is helpful to everyone. At the same time, I hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.