js实现线条运动

在JavaScript中实现线条运动可以通过多种方式，常见的有使用HTML5的Canvas API或者SVG。以下是使用Canvas API实现线条运动的示例：

基本概念

Canvas API：HTML5提供的一个绘图API，可以在网页上绘制图形。
requestAnimationFrame：用于在浏览器重绘之前执行动画更新，提供更流畅的动画效果。

实现步骤

创建Canvas元素：在HTML中添加一个Canvas元素。
获取Canvas上下文：使用JavaScript获取Canvas的2D绘图上下文。
绘制线条：使用Canvas API绘制线条。
更新线条位置：通过定时器或requestAnimationFrame不断更新线条的位置，实现运动效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线条运动示例</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        let x = 0;
        let y = canvas.height / 2;
        const speed = 2;

        function drawLine() {
            // 清除画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制线条
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x + 100, y);
            ctx.strokeStyle = 'blue';
            ctx.lineWidth = 5;
            ctx.stroke();

            // 更新线条位置
            x += speed;

            // 边界检测
            if (x > canvas.width) {
                x = -100; // 重新从左侧进入
            }

            // 请求下一帧动画
            requestAnimationFrame(drawLine);
        }

        drawLine();
    </script>
</body>
</html>