绘制飞线,echarts迁徙图原理

其实是在元素上绘制了一条线,然后利用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);

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Canvas 通过改变渐变线的起始点做飞线效果</title>
</head>
 
<body>
    <canvas id="myCanvas" width="700" height="700" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <script>
    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);
        
    </script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值