javascript - 如何使用 Canvas 制作扫描仪效果线动画

Question

是否可以使用 html5 canvas 制作扫描仪效果动画，上下移动发光线？

Effect example.

我想在我的 html5 视频窗口上使用此效果。如果可能的话，您可以分享代码示例或我必须开始的地方吗？

Answer 1

是的，这是可能的。以下是您如何实现这一目标...

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 4,
    y = 4,
    speed = 1,
    isBottom = false;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#07C';
    ctx.lineCap = 'round';
    ctx.shadowBlur = 18;
    ctx.shadowColor = "#07C";
    ctx.fillRect(x, y, 210, 10);
	
    if (!isBottom && y < canvas.height - 14) y += speed;
    else if (y === canvas.height - 14) isBottom = true;
	
    if (isBottom && y > 4) y -= speed;
    else if (y === 4) isBottom = false;
	
    requestAnimationFrame(draw);
}

draw();

body{margin:0;overflow:hidden}canvas{border:1px solid #d3d3d3}

<canvas id="canvas" width="218" height="218"></canvas>