Canvas 倾斜矩形绘制波浪效果

使用的AI模型：

KIMI思考版

对话编程步骤：

画矩形

使用canvas画1个矩形，长1000，宽40，线性渐变颜色从上到下是#c6d2ff和#d3ddfd，

然后倾斜-45度

增加动画

矩形从左上角往右下角移动滑动10秒，前3秒透明度从1到0，高度从5到80

增加重复

每隔0.5秒钟，重复画以上矩形

编程结果：

编程代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas循环动画矩形</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="1200" height="800"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        
        const animationDuration = 10000; // 每个动画持续10秒（修改这里）
        const spawnInterval = 1000;      // 每1秒生成一个新矩形
        
        // 存储所有活跃的动画
        let activeAnimations = [];
        let lastSpawnTime = 0;
        
        // 起点和终点
        const startX = 100;
        const startY = 100;
        const endX = canvas.width - 100;
        const endY = canvas.height - 100;
        
        // 尺寸
        const width = 1000;
        const startHeight = 5;
        const endHeight = 40;
        
        function spawnAnimation(currentTime) {
            activeAnimations.push({
                startTime: currentTime
            });
        }
        
        function animate(currentTime) {
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 检查是否需要生成新动画（每1秒）
            if (currentTime - lastSpawnTime >= spawnInterval) {
                spawnAnimation(currentTime);
                lastSpawnTime = currentTime;
            }
            
            // 更新并绘制所有活跃动画
            activeAnimations = activeAnimations.filter(anim => {
                const elapsed = currentTime - anim.startTime;
                
                // 如果动画已完成（超过10秒），移除
                if (elapsed > animationDuration) {
                    return false;
                }
                
                const progress = elapsed / animationDuration;
                
                // 计算当前位置
                const currentX = startX + (endX - startX) * progress;
                const currentY = startY + (endY - startY) * progress;
                
                // 计算当前高度（5到40）
                const currentHeight = startHeight + (endHeight - startHeight) * progress;
                
                // 计算透明度：前3秒从1到0，后7秒保持0
                let opacity;
                if (elapsed <= 3000) {
                    opacity = 1 - (elapsed / 3000);
                } else {
                    opacity = 0;
                }
                
                // 保存状态
                ctx.save();
                
                // 移动并旋转-45度
                ctx.translate(currentX, currentY);
                ctx.rotate(-Math.PI / 4);
                ctx.globalAlpha = opacity;
                
                // 创建渐变（从上到下）
                const gradient = ctx.createLinearGradient(0, -currentHeight/2, 0, currentHeight/2);
                gradient.addColorStop(0, '#c6d2ff');
                gradient.addColorStop(1, '#d3ddfd');
                ctx.fillStyle = gradient;
                
                // 绘制矩形（中心对齐）
                ctx.fillRect(-width/2, -currentHeight/2, width, currentHeight);
                
                ctx.restore();
                
                return true; // 保留在数组中继续动画
            });
            
            requestAnimationFrame(animate);
        }
        
        // 立即开始第一个
        lastSpawnTime = performance.now();
        spawnAnimation(lastSpawnTime);
        requestAnimationFrame(animate);
    </script>
</body>
</html>

更多：

实名认证接口整理_实名人身核验

语音合成接口整理_各平台语音合成接口

C# 时间格式日期格式使用合集