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

最新推荐文章于 2024-07-18 17:21:05 发布

徐同保

最新推荐文章于 2024-07-18 17:21:05 发布

阅读量1.8k

点赞数 1

分类专栏： web前端前端技术分享文章标签： canvas 飞线

本文链接：https://blog.csdn.net/xutongbao/article/details/81281752

版权

web前端同时被 2 个专栏收录

735 篇文章 16 订阅

订阅专栏

前端技术分享

271 篇文章 3 订阅

订阅专栏

<!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;
    function auto() {
        ctx.beginPath();
        ctx.moveTo(0, 100);
        ctx.lineTo(700, 100);
        var grd = ctx.createLinearGradient(start, 0, start + 200, 0);
        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;
        }
        setTimeout(function() {
            auto();
        }, 100);
    }
    auto();
    </script>
</body>
</html>

竖版：

<!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;
    function auto() {
        ctx.beginPath();
        ctx.moveTo(100, 0);
        ctx.lineTo(100, 700);
        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;
        }
        setTimeout(function() {
            auto();
        }, 100);
    }
    auto();
    </script>
</body>
</html>