请选择 进入手机版 | 继续访问电脑版
游客您好
第三方账号登陆
鲸云网络 管理员
未知星球 | 未知职业
  • 关注0
  • 粉丝0
  • 帖子704
热议话题
zblog php mip主题开发官方指南
2020-07-08 0
由于百度对MIP的支持使得MIP网页大受欢迎,众多站长纷纷把网页改造成MIP。作为国内主
精选帖子

[HTML5] canvas绘制折线路径动画实现

[复制链接]
鲸云网络 发表于 2021-7-24 09:46:38 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

2021511164927254.gif?2021411164939.gif

要实现以上路径动画,一般可以使用svg的动画功能。或者使用canvas绘制,结合路径数学计算来实现。
如果用canvas来绘制,其中的难点在于:

  • 需要计算子路径,这块计算比较复杂。(当然是可以实现的)
  • 渐变的计算, 从图中可以看出,动画的子路径是有渐变效果的,如果要分段计算渐变也很复杂。

本文介绍一种思路,使用clip方法,动态移动clip的区域,来达到近似的效果。具体怎么做。

绘制灰色路径

绘制路径的代码比较简单,此处就不详细说明,下面代码就模拟了了一个折线路径的绘制:


  1. ctx.beginPath();   
  2. ctx.moveTo(100,100);
  3. ctx.lineTo(200,100);
  4. ctx.lineTo(230,200);
  5. ctx.lineTo(250,50);
  6. ctx.lineTo(270,180);
  7. ctx.lineTo(300,60);
  8. ctx.lineTo(330,160);
  9. ctx.lineTo(350,60);
  10. ctx.lineTo(380,100);
  11. ctx.lineTo(480,100);
  12. ctx.strokeStyle = "gray";
  13. ctx.lineJoin = "round";
  14. ctx.stroke();
复制代码
绘制亮色路径

绘制亮色路径的代码和绘制灰色路径的代码一样,只是样式是一个亮的颜色:

  1. ctx.save();
  2.             ctx.beginPath();   
  3.             ctx.moveTo(100,100);
  4.             ctx.lineTo(200,100);
  5.             ctx.lineTo(230,200);
  6.             ctx.lineTo(250,50);
  7.             ctx.lineTo(270,180);
  8.             ctx.lineTo(300,60);
  9.             ctx.lineTo(330,160);
  10.             ctx.lineTo(350,60);
  11.             ctx.lineTo(380,100);
  12.             ctx.lineTo(480,100);
  13.             ctx.strokeStyle = "gray";
  14.             ctx.lineJoin = "round";
  15.             ctx.stroke();
复制代码
clip控制亮色路径的绘制区域

canvas的clip方法可以控制绘制的区域,通过该方法,可以控制智绘制路径的一部分:

  1.         ctx.beginPath();
  2.         ctx.rect(offset,0,100,500); // offset 等于0
  3.         ctx.clip();
  4.            ...
  5.         ctx.stroke();
复制代码
动画效果

通过不断变化offset的值,就可以大道亮色路径移动的效果,代码如下:

  1. offset += 2;
  2. if(offset > 600){
  3.        offset = 100;
  4. }
  5. requestAnimationFrame(animate);
复制代码
渐变

我们知道渐变没法沿着任意路径,如果计算折线,分段计算渐变又很麻烦。 其实在本案例中,虽然是折线,但是整体的运动方向总是从左往右的,所以可以用从左往右的渐变来近似模拟既可以:

  1. function createGradient(ctx,x0,y0,x1,y1){
  2.           var grd = ctx.createLinearGradient(x0,y0,x1,y1);
  3.            grd.addColorStop(0,'#129ab3');
  4.            grd.addColorStop(1,"#19b5fe");
  5.            return grd;
  6. }

  7. ctx.strokeStyle = createGradient(ctx,offset,0,offset + 100,0);

复制代码

最终效果如下所示:

2021511165245321.gif

全部代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>line animate</title>
  6.     <style>
  7.         canvas {
  8.             border: 1px solid #000;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <canvas id="canvas" width="600" height="400"></canvas>
  14.     <script>
  15.         var ctx = document.getElementById( 'canvas' ).getContext( '2d' );
  16.         var w = canvas.width,
  17.                 h = canvas.height;

  18.         var x = w / 2,y = h / 2;

  19.         function setupCanvas(canvas) {
  20.             let width = canvas.width,
  21.             height = canvas.height,
  22.             dpr = window.devicePixelRatio || 1.0;
  23.             if (dpr != 1.0 ) {
  24.             canvas.style.width = width + "px";
  25.             canvas.style.height = height + "px";
  26.             canvas.height = height * dpr;
  27.             canvas.width = width * dpr;
  28.             ctx.scale(dpr, dpr);
  29.             }
  30.         }
  31.         setupCanvas(canvas);
  32.         var offset = 100;
  33.         function createGradient(ctx,x0,y0,x1,y1){
  34.            var grd = ctx.createLinearGradient(x0,y0,x1,y1);
  35.            grd.addColorStop(0,'#9a12b3');
  36.            grd.addColorStop(1,"#19b5fe");
  37.            return grd;
  38.         }

  39.         function animate(){
  40.             ctx.fillStyle = "black";
  41.             ctx.fillRect(0,0,canvas.width,canvas.height);
  42.             ctx.lineWidth = 3;
  43.             ctx.save();
  44.             ctx.beginPath();   
  45.             ctx.moveTo(100,100);
  46.             ctx.lineTo(200,100);
  47.             ctx.lineTo(230,200);
  48.             ctx.lineTo(250,50);
  49.             ctx.lineTo(270,180);
  50.             ctx.lineTo(300,60);
  51.             ctx.lineTo(330,160);
  52.             ctx.lineTo(350,60);
  53.             ctx.lineTo(380,100);
  54.             ctx.lineTo(480,100);
  55.             ctx.strokeStyle = "gray";
  56.             ctx.lineJoin = "round";
  57.             ctx.stroke();

  58.             ctx.beginPath();
  59.             ctx.rect(offset,0,150,500);
  60.             ctx.clip();
  61.             ctx.beginPath();
  62.             ctx.moveTo(100,100);
  63.             ctx.lineTo(200,100);
  64.             ctx.lineTo(230,200);
  65.             ctx.lineTo(250,50);
  66.             ctx.lineTo(270,180);
  67.             ctx.lineTo(300,60);
  68.             ctx.lineTo(330,160);
  69.             ctx.lineTo(350,60);
  70.             ctx.lineTo(380,100);
  71.             ctx.lineTo(480,100);
  72.             ctx.lineWidth = 4;
  73.             ctx.strokeStyle = createGradient(ctx,offset,0,offset + 150,0);
  74.             ctx.lineCap = "round";
  75.             // ctx.globalCompositeOperation = 'lighter';
  76.             ctx.lineJoin = "round";
  77.             ctx.stroke();

  78.             ctx.restore();

  79.             offset += 2;
  80.             if(offset > 600){
  81.                 offset = 100;
  82.             }

  83.             requestAnimationFrame(animate);
  84.         }

  85.         animate();
  86.     </script>
  87. </body>
  88. </html>

复制代码

总结

其实整体思路是用了近似,而不是严格的控制路径长度和渐变效果,这样可以更方便实现以上功能。  其实人眼有时候是分辨不出来一些细节,可视化,有的时候只有能够达到让人“觉得”是那么回事,其实目的也就达到了。
以上方案只能适用于,折线路径的整体方向是一致的。如果整体方向是先水平向右,然后在垂直向下,或者甚至出现往回拐的情况,就不适合了。




回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

© 2001-2020 懒人建站 ( 辽ICP备18012687号-3 )

辽公网安备 21032102000036号