javascript canvas拖尾效果详解编程语言

<!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拖尾效果

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/18776.html

javascript canvas拖尾效果详解编程语言

相关推荐

发表回复