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