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