如何在JavaScript Canvas中实现绘制图形的5秒淡入动画？

Canvas绘制的图形是像素化位图，无法像DOM元素那样直接修改透明度属性，必须通过逐帧重绘并调整颜色透明度来实现淡入效果。以下是完整的可运行方案：

完整代码 #

<body onload="fadeInCircle();">
    <canvas id="circle" width="450" height="450"></canvas>
</body>

<script>
function fadeInCircle() {
    const canvas = document.getElementById('circle');
    if (!canvas.getContext) return;

    const ctx = canvas.getContext('2d');
    const X = canvas.width / 2;
    const Y = canvas.height / 2;
    const R = 45;
    const duration = 5000; // 淡入时长，单位毫秒
    let startTime = null;

    // 动画循环函数
    function animate(timestamp) {
        if (!startTime) startTime = timestamp;
        // 计算已过去时间占总时长的比例，限制在0-1之间
        const progress = Math.min((timestamp - startTime) / duration, 1);
        // 当前透明度随进度从0线性过渡到1
        const alpha = progress;

        // 清空画布，避免重复绘制导致颜色叠加
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制带动态透明度的圆形
        ctx.beginPath();
        ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
        ctx.lineWidth = 3;
        // 将原十六进制颜色转为rgba格式，动态设置alpha值
        ctx.strokeStyle = `rgba(100, 88, 98, ${alpha})`;
        ctx.stroke();

        // 未完成淡入则继续循环
        if (progress < 1) {
            requestAnimationFrame(animate);
        }
    }

    // 启动动画
    requestAnimationFrame(animate);
}
</script>

关键细节说明 #

• 逐帧重绘的必要性：Canvas绘制结果是静态像素，一旦完成绘制就无法直接修改，必须清空画布后重新绘制带新透明度的圆形。
• requestAnimationFrame优势：该API与浏览器刷新频率同步（通常60帧/秒），比setInterval更流畅，避免动画卡顿。
• 透明度控制逻辑：通过记录动画开始时间，计算时间差占总时长的比例，将比例转为0-1之间的透明度值，保证5秒内从完全透明过渡到完全显示。
• 颜色格式转换：原代码中的#645862转换为RGB值是(100, 88, 98)，使用rgba()格式可以动态调整alpha通道实现透明效果。

内容的提问来源于stack exchange，提问作者Kyleigh Fish