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

Most people do not understand the knowledge points of this article "how to use canvas to achieve simple online animation in html5", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use canvas to achieve simple wired animation in html5" article.

Step1: drawing point

First create a label

Set the coordinates of several points:

Const points = [[200,100], / / Top [300,200], / / right [100,200], / / left [200,100], / / Top [200,300], / / bottom [100,200], / / left [300,200], / / right [200,300]]; const canvas = document.querySelector ("canvas") Const ctx = canvas.getContext ("2d")

Then draw the dots:

Points.forEach (([x, y])) = > {drawDot (x, y);}); function drawDot (x1, y1, r) {ctx.save (); ctx.beginPath (); / / do not write to connect with lines ctx.fillStyle = "red"; / / draw as a rectangle ctx.arc (x1, y1, r? R: 2,0,2 * Math.PI); ctx.fill (); ctx.restore ();}

Step2: drawing Lin

We encapsulate a method, pass in the starting point and end point, and draw a line.

Function drawLine (x1, y1, x2, y2) {ctx.save (); ctx.beginPath (); / / every time it is not written, it redraws the last line ctx.lineCap = "round"; ctx.lineJoin = "round"; var grd = ctx.createLinearGradient (x1, y1, x2, y2); ctx.moveTo (x1, y1); ctx.lineTo (x2, y2) Ctx.closePath (); ctx.strokeStyle = "rgba"; ctx.stroke (); ctx.restore ();}

Step3: line animation

In this case, the slope between two points needs to be calculated, and then the offset of y can be calculated by moving the x coordinate by ±1 unit each time, knowing the slope and x offset. It is worth noting that this coordinate system is a little different from the xy coordinate system in mathematics, and the y-axis is reversed. You can then introduce an additional parameter speed to control the speed:

Function lineMove (points) {if (points.length)

< 2) { return; } const [[x1, y1], [x2, y2]] = points; let dx = x2 - x1; let dy = y2 - y1; if (Math.abs(dx) < 1 && Math.abs(dy) < 1) { points = points.slice(1); lineMove(points); return; } let x = x1, y = y1; //线条绘制过程中的终点 if (dx === 0) { (x = x2), (y += (speed * dy) / Math.abs(dy)); } else if (dy === 0) { x += (speed * dx) / Math.abs(dx); y = y2; } else if (Math.abs(dx) >

= 1) {let rate = dy / dx; x + = (speed * dx) / Math.abs (dx); y + = (speed * rate * dx) / Math.abs (dx);} drawLine (x1, y1, x, y); points [0] = [x, y]; window.requestAnimationFrame (function () {lineMove (points)) });}

Complete code:

Canvas- connection Animation / / starting Point: 10Power20 Endpoint: 150200 const points = [[200,100], / / Top [300,200], / / right [100,200], / / left [200,100], / / Top [200,300], / / Lower [100,200], / / left [300,200], / / right [200,300]] Const canvas = document.querySelector ("canvas"); const ctx = canvas.getContext ("2d"); / / const img = new Image (); const speed = 10; / / Speed / / img.onload = function () {/ / canvas.width = img.width; / / canvas.height = img.height; animate (ctx); / / img.src = ". / imgs/demo.png" Function animate (ctx) {/ / ctx.drawImage (img, 0,0); ctx.fillRect (0,0, canvas.width, canvas.height); points.forEach (([x, y])) = > {drawDot (x, y);}); lineMove (points);} function lineMove (points) {if (points.length)

< 2) { return; } const [[x1, y1], [x2, y2]] = points; let dx = x2 - x1; let dy = y2 - y1; if (Math.abs(dx) < 1 && Math.abs(dy) < 1) { points = points.slice(1); lineMove(points); return; } let x = x1, y = y1; //线条绘制过程中的终点 if (dx === 0) { (x = x2), (y += (speed * dy) / Math.abs(dy)); } else if (dy === 0) { x += (speed * dx) / Math.abs(dx); y = y2; } else if (Math.abs(dx) >

= 1) {let rate = dy / dx; x + = (speed * dx) / Math.abs (dx); y + = (speed * rate * dx) / Math.abs (dx);} drawLine (x1, y1, x, y); points [0] = [x, y]; window.requestAnimationFrame (function () {lineMove (points);}) } function drawLine (x1, y1, x2, y2) {ctx.save (); ctx.beginPath (); / / not writing will redraw the last line ctx.lineCap = "round"; ctx.lineJoin = "round"; var grd = ctx.createLinearGradient (x1, y1, x2, y2); ctx.moveTo (x1, y1); ctx.lineTo (x2, y2); ctx.closePath () Ctx.strokeStyle = "rgba"; ctx.stroke (); ctx.restore ();} function drawDot (x1, y1, r) {ctx.save (); ctx.beginPath (); / / ctx.fillStyle = "red"; / / draw as a rectangular ctx.arc (x1, y1, r? R: 2,0,2 * Math.PI); ctx.fill (); ctx.restore ();} above is the content of this article on "how to use canvas in html5 to achieve simple connection animation". I believe you all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please 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.