<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>
        {$title}
    </title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" name="viewport" />
    <meta content="telephone=no" name="format-detection" />
    <!-- Link Swiper's CSS -->
</head>

<body>
    <canvas id="myCanvas" width="1600" height="950" style="border:1px solid #d3d3d3;"></canvas>
    <script type="text/javascript">
    var lujinglist = [];
    //制作路径
    for (var x = 10; x <= 300; x++) {
        var dian = [x, 50];
        lujinglist.push(dian);
    }
    for (var x = 50; x < 300; x++) {
        var dian = [300, x];
        lujinglist.push(dian);
    }

    console.log(lujinglist);

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


    var ctx = c.getContext("2d");
    var j = 0;
    draw();
    function draw() {
        //先更新每个矩形坐标的数组 然后再去渲染
       console.log(11);
        j+=3

        ctx.clearRect(0, 0, 1600, 950);



        for (var i = 0; i < 60; i++) {
            ctx.fillStyle = 'rgba(255,0,0,' + (i / 60) + ')';
            ctx.fillRect(lujinglist[i + j][0], lujinglist[i + j][1], 5, 5);
        }

        requestAnimationFrame(draw)
    }
    </script>
</body>

</html>


javascript canvas拖尾效果