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>
转载自：https://blog.csdn.net/xutongbao/article/details/81281752
