canvas绘制折线路径动画
最近有读者加我微信咨询这个问题:
其中的效果是一个折线路径动画效果,如下图所示:
要实现以上路径动画,一般可以使用svg的动画功能。或者使用canvas绘制,结合路径数学计算来实现。
如果用canvas来绘制,其中的难点在于:
- 需要计算子路径,这块计算比较复杂。(当然是可以实现的)
- 渐变的计算, 从图中可以看出,动画的子路径是有渐变效果的,如果要分段计算渐变也很复杂。
本文介绍一种思路,使用clip方法,动态移动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.strokeStyle = "gray";ctx.lineJoin = "round";ctx.stroke();
效果如下:
绘制亮色路径
绘制亮色路径的代码和绘制灰色路径的代码一样,只是样式是一个亮的颜色:
ctx.save();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.strokeStyle = "gray";ctx.lineJoin = "round";ctx.stroke();
效果如下:
clip控制亮色路径的绘制区域
canvas的clip方法可以控制绘制的区域,通过该方法,可以控制智绘制路径的一部分:
ctx.beginPath();ctx.rect(offset,0,100,500); // offset 等于0ctx.clip();...ctx.stroke();
clip之后,亮色路径就只会绘制一部分,如下图:
动画效果
通过不断变化offset的值,就可以大道亮色路径移动的效果,代码如下:
offset += 2;if(offset > 600){offset = 100;}
requestAnimationFrame(animate);
最终效果如下:
渐变
我们知道渐变没法沿着任意路径,如果计算折线,分段计算渐变又很麻烦。 其实在本案例中,虽然是折线,但是整体的运动方向总是从左往右的,所以可以用从左往右的渐变来近似模拟既可以:
function createGradient(ctx,x0,y0,x1,y1){var grd = ctx.createLinearGradient(x0,y0,x1,y1);grd.addColorStop(0,'#129ab3');grd.addColorStop(1,"#19b5fe");return grd;
}ctx.strokeStyle = createGradient(ctx,offset,0,offset + 100,0);
最终效果如下所示:
全部代码
<!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();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.strokeStyle = "gray";ctx.lineJoin = "round";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>
总结
其实整体思路是用了近似,而不是严格的控制路径长度和渐变效果,这样可以更方便实现以上功能。 其实人眼有时候是分辨不出来一些细节,可视化,有的时候只有能够达到让人“觉得”是那么回事,其实目的也就达到了。
以上方案只能适用于,折线路径的整体方向是一致的。如果整体方向是先水平向右,然后在垂直向下,或者甚至出现往回拐的情况,就不适合了。
关注公众号“ITMan彪叔” 可以及时收到更多有价值的文章。另外如果对可视化感兴趣,可以和我交流,微信541002349.
canvas绘制折线路径动画相关推荐
- HTML5 canvas绘制雪花飘落动画(需求分析、知识点、程序编写分布详解)
HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 原文:HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 看到网上很多展示html5雪花飞动 ...
- 2022跨年烟花代码(一)Canvas绘制3D烟花动画特效
Canvas绘制3D烟花动画特效 html代码 <!doctype html> <html> <head> <meta charset="utf-8 ...
- Canvas绘制鱼儿游水动画
实现一个canvas绘图的鱼儿游水动画,绘图的原理为通过定时器绘制图片不同的位置实现动画的效果. 以下是动画效果: 以下是代码实现 : <!doctype html> <html&g ...
- 利用canvas绘制的拓扑动画效果
展示效果网址 reloadimage(callback){let imgArrs = [];this.imgArray.forEach((img,index,arrs)=>{imgArrs[in ...
- html5贝塞尔曲线,用canvas绘制一个曲线动画——深入理解贝塞尔曲线
前言 在前端开发中,贝赛尔曲线无处不在: 它可以用来绘制曲线,在svg和canvas中,原生提供的曲线绘制都是使用贝赛尔曲线 它也可以用来描述一个缓动算法,设置css的transition-timin ...
- 前端------ canvas 绘制折线图详解
canvas时html5新添加的一个画布标签. 他有很多属性,大家可以在下边网址查看: http://www.w3school.com.cn/tags/html_ref_canvas.asp 画布ca ...
- 前端:用canvas绘制一个烟花动画
关注并将「趣谈前端」设为星标 每日定时推送技术干货/优秀开源/技术思维 前言 在我们日常开发中贝塞尔曲线无处不在: svg 中的曲线(支持 2阶. 3阶) canvas 中绘制贝塞尔曲线 几乎所有前端 ...
- 【Canvas】js用Canvas绘制阴阳太极图动画效果
学习JavaScript是否兴趣缺缺,那就需要来一个兴趣学习,问一下有没有兴趣用Canvas画图呢,可以画很多有趣的事物,自由发挥想象,收获多多哦,这里有一个例子,如何用canvas画阴阳太极图动图效 ...
- ArcGIS API for Silverlight 绘制降雨路径动画
#region 降雨动画演示 2014-04-16List<Graphic> graphics = new List<Graphic>();int INDEX = 0;MapP ...
最新文章
- Strom序列化机制
- 图像偏色检测算法,速度快,效果好,共享给大家。
- 3.11课·········异常语句与for循环重复
- boost::static_pointer_cast相关的测试程序
- pycharm创建mysql项目_python+Django+pycharm+mysql 搭建首个web项目详解
- 禁用内置键盘_如何禁用Windows 10的所有内置广告
- WinForm邮件内容编辑器的简单实现
- php 织梦模板 防盗,dedecms 软件下载频道防盗链php代码
- BugkuCTF-WEB题矛盾
- 物体重心的特点是什么_从重心变化看熊晃动作的学练要点
- [转载] JAVA中transient 关键字
- java 并发多线程显式锁概念简介 什么是显式锁 多线程下篇(一)
- PHP语言 -- 封装连接数据库类
- 2020年计算机保研经验总结
- 人工智能入门——机器学习小案例(二)
- ARP协议详解 ARP报文结构
- react初步学习(三)
- 拉普拉斯矩阵(Laplacian matrix)及其变体详解
- 给pdf、word、excel文件添加水印
- 宽带常见的有20 30 50 100兆指的是什么意思???
热门文章
- git密码修改问题解决方案(Window Mac)
- crm使用soap操作商机赢单
- Spring Batch之读数据—FlatFileItemReader(二十五)
- 音频通道数、采样频率、采样位数、采样个数(样本数)的概念及计算一帧音频的大小、每秒播放的音频字节大小、一帧的播放时长、音频重采样
- 技术与经济之二:存货市场与直销市场
- 透镜成像的一些知识回顾
- Android 10 Selinux
- 品牌统一化vs多元化:美团与滴滴为何选择了不同道路?
- ​720vr全景的优势是什么?这种全景技术应用有哪些?
- 计算机的excel的知识点,计算机知识点-第四部EXCEL.doc