canvas简单连线动画的实现代码
程序员文章站
2022-11-27 23:27:14
这篇文章主要介绍了canvas简单连线动画的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 20-02-04...
前言:canvas动画入门系列之简单连线动画。虽然简单,但连线动画应用场景还挺多,因此做了个小demo,一通百通。
step1:绘制点
首先创建个标签<canvas id="canvas"></canvas>
设置几个点的坐标
const points = [ [200, 100], //上 [300, 200], //右 [100, 200], //左 [200, 100], //上 [200, 300], //下 [100, 200], //左 [300, 200], //右 [200, 300] ]; const canvas = document.queryselector("canvas"); const ctx = canvas.getcontext("2d");
然后把点给画出来
points.foreach(([x, y]) => { drawdot(x, y); }); function drawdot(x1, y1, r) { ctx.save(); ctx.beginpath(); //不写会和线连起来 ctx.fillstyle = "red"; //绘制成矩形 ctx.arc(x1, y1, r ? r : 2, 0, 2 * math.pi); ctx.fill(); ctx.restore(); }
step2:绘制线条
我们封装一个方法,传入起点终点,绘制一根线条
function drawline(x1, y1, x2, y2) { ctx.save(); ctx.beginpath(); //不写每次都会重绘上次的线 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(255,255,255,1)"; ctx.stroke(); ctx.restore(); }
step3:线条动画
这里面需要计算两点之间的斜率,然后x坐标每次挪动±1单位,已知斜率和x偏移,即可计算出y的偏移。值得注意的是,这个坐标系和数学中的xy坐标系有点不一样,y轴是反的。然后可以引入额外的参数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); }); }
主要代码就这么多,先看效果
完整代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title>canvas-连线动画</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> //起点:10,20 终点:150,200 const points = [ [200, 100], //上 [300, 200], //右 [100, 200], //左 [200, 100], //上 [200, 300], //下 [100, 200], //左 [300, 200], //右 [200, 300] ]; const canvas = document.queryselector("canvas"); const ctx = canvas.getcontext("2d"); // const img = new image(); const speed = 10; //速度 // 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(); //不写每次都会重绘上次的线 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(255,255,255,1)"; ctx.stroke(); ctx.restore(); } function drawdot(x1, y1, r) { ctx.save(); ctx.beginpath(); //不写会和线连起来 ctx.fillstyle = "red"; //绘制成矩形 ctx.arc(x1, y1, r ? r : 2, 0, 2 * math.pi); ctx.fill(); ctx.restore(); } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 关羽曾放过夏侯惇?历史真相是什么?