• 售前

  • 售后

热门帖子
入门百科

canvas绘制折线路径动画实现

[复制链接]
银鲜目江探 显示全部楼层 发表于 2021-8-14 14:32:07 |阅读模式 打印 上一主题 下一主题
最近有读者加我微信咨询这个标题:

此中的结果是一个折线路径动画结果,如下图所示:

要实现以上路径动画,一般可以使用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();
复制代码
clip之后,亮色路径就只会绘制一部分,如下图:

动画结果

通过不绝变革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);
复制代码
最终结果如下所示:

全部代码
  1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>line animate</title>    <style>        canvas {            border: 1px solid #000;        }    </style></head><body>    <canvas id="canvas" width="600" height="400"></canvas>    <script>        var ctx = document.getElementById( 'canvas' ).getContext( '2d' );        var w = canvas.width,                h = canvas.height;        var x = w / 2,y = 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(x0,y0,x1,y1);           grd.addColorStop(0,'#9a12b3');           grd.addColorStop(1,"#19b5fe");           return grd;        }        function animate(){            ctx.fillStyle = "black";            ctx.fillRect(0,0,canvas.width,canvas.height);            ctx.lineWidth = 3;            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();             ctx.beginPath();            ctx.rect(offset,0,150,500);            ctx.clip();            ctx.beginPath();            ctx.moveTo(100,100);            ctx.lineTo(200,100);            ctx.lineTo(230,200);            ctx.lineTo(250,50);            ctx.lineTo(270,180);            ctx.lineTo(300,60);            ctx.lineTo(330,160);            ctx.lineTo(350,60);            ctx.lineTo(380,100);            ctx.lineTo(480,100);            ctx.lineWidth = 4;            ctx.strokeStyle = createGradient(ctx,offset,0,offset + 150,0);            ctx.lineCap = "round";            // ctx.globalCompositeOperation = 'lighter';            ctx.lineJoin = "round";            ctx.stroke();             ctx.restore();            offset += 2;            if(offset > 600){                offset = 100;            }            requestAnimationFrame(animate);        }        animate();    </script></body></html>
复制代码
总结

着实团体思绪是用了近似,而不是严格的控制路径长度和渐变结果,如许可以更方便实现以上功能。  着实人眼偶然间是分辨不出来一些细节,可视化,有的时间只有可以或许达到让人“以为”是那么回事,着实目的也就达到了。
以上方案只能实用于,折线路径的团体方向是一致的。假如团体方向是先程度向右,然后在垂直向下,大概甚至出现往回拐的情况,就不适合了。
到此这篇关于canvas绘制折线路径动画实现的文章就介绍到这了,更多相关canvas折线路径动画内容请搜刮草根技术分享从前的文章或继续浏览下面的相关文章,盼望大家以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作