zoukankan      html  css  js  c++  java
  • Canvas 通过改变渐变线的起始点做飞线效果

    <!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>

  • 相关阅读:
    RS错误RSV-VAL-0032之项目未在布局中引用的3种解决办法
    Cognos访问权限之让拒绝更友善
    SSIS包部署错误之运行环境设置
    RS开发中的一些小技巧[不定期更新]
    RS布局问题之块的不完美之完美
    Zuul使用Ribbon配置自动重试
    Eureka集群试验的一点总结
    centos 6.4 调整home和root分区大小
    ribbon区域亲和配置一例
    SpringMVC 类内部的RequestMapping注解能否被继承?
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924832.html
Copyright © 2011-2022 走看看