html怎么绘制飞线,绘制飞线，echarts迁徙图原理

2024-06-04 12:37:04

其实是在元素上绘制了一条线，然后利用canvas 的createLinearGradient函数不断移动线段的样式位置来实现。

因此首先绘制线段

ctx.beginPath();

ctx.moveTo(100, 0);

ctx.lineTo(100, 700);

由于要不断改变其样式，因此要记录起起始位置，然后利用定时器不断重置其位置来实现。

var start = 0;

//改变样式的函数

function auto() {

var grd = ctx.createLinearGradient(0, start, 0, start + 200);

grd.addColorStop(0, "#5BC0DE");

grd.addColorStop(0.5, "#ffff00");

grd.addColorStop(1, "#5BC0DE");

ctx.lineWidth = 5;

ctx.strokeStyle = grd;

ctx.stroke();

ctx.closePath();

if (start >= 700) {

start = 0;

} else {

start = start + 50;

}

}

定时器触发

setInterval(

auto

, 100);

下一步就是将地理坐标转换为屏幕坐标，然后来不断添加飞线，即可完成迁徙图

Canvas 通过改变渐变线的起始点做飞线效果

您的浏览器不支持 HTML5 canvas 标签。

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var start = 0;

ctx.beginPath();

ctx.moveTo(100, 0);

ctx.lineTo(100, 700);

function auto() {

var grd = ctx.createLinearGradient(0, start, 0, start + 200);

grd.addColorStop(0, "#5BC0DE");

grd.addColorStop(0.5, "#ffff00");

grd.addColorStop(1, "#5BC0DE");

ctx.lineWidth = 5;

ctx.strokeStyle = grd;

ctx.stroke();

ctx.closePath();

if (start >= 700) {

start = 0;

} else {

start = start + 50;

}

}

setInterval(

auto

, 100);

html怎么绘制飞线,绘制飞线，echarts迁徙图原理相关推荐

AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）
首先肯定是给出demo啦: 演示demo 直接到左侧选择框中选择View taxi flow里面随便选个日期总体介绍最近由于工作室项目需要做一个数据可视化平台,这个平台最终是交由国外人使用的.而国 ...
飞线5根连接图_“飞线”和“跳线”有什么区别，你用对了吗？电路故障的排查方法...
短路和开路上面两张图,左侧是一个完整的电路,灯会点亮.右侧红色的线断开了,导致灯熄灭,这种线路故障叫做开路或者断路. 短路的意思就是电流不经过用电器,电流从正极出来直接走导线,然后回到负极.相当于图 ...
R语言使用ggpubr包的ggline函数绘制各种漂亮形式的线图实战
R语言使用ggpubr包的ggline函数绘制各种漂亮形式的线图实战目录 R语言使用ggpubr包的ggline函数绘制各种漂亮形式的线图实战
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )
文章目录一.设置线宽度二.绘制单条线段 GL_LINES 三.绘制多条线段 GL_LINES 四.绘制依次连接的点组成的线 GL_LINE_STRIP 五.绘制圈 GL_LINE_LOOP ( 偶 ...
Coding Party 邀你出战！飞桨黑客马拉松线下场来啦
12月4-5日,这48H,与100+开发者HACK Together "黑客"很酷?和"黑客"一起"战斗"是种什么样的体验?你参与这场&qu ...
绘制自己组合的k线图_短线投资者必备的四种双K线组合抄底技巧，次次选中黑马股，精准率超高...
(本文由公众号越声投研(yslcwh)整理,仅供参考,不构成操作建议.如自行操作,注意仓位控制和风险自负.) 股市里有一句话叫做:"新手死于追高,老手死于抄底",讲的是股市里大多数 ...
VC++ 利用MFC的CWindowDC类实现画线功能在桌面窗口中画线绘制彩色线条 CPen nPenStyle nWidth crColor
目录利用MFC的CWindowDC类实现画线功能在桌面窗口中画线绘制彩色线条 CPen nPenStyle nWidth crColor 接上:VC++ 绘制线条 OnLButtonDown函数 ...
Qt （高仿Visio）流程图组件开发（二）基本图元绘制图元间连线绘制
文章目录本系列目录前言一.如何绘制图元二.两图元之间如何连线三.如何实现线跟随图元移动四.线的位置判断总结本系列目录 Qt (高仿Visio)流程图组件开发(一) 效果展示及基本开发框 ...
神奇的canvas——点与线绘制的绚丽动画效果
代码地址如下: http://www.demodashi.com/demo/11636.html 前言之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效 ...

最新文章

热门文章