当前位置：首页 > JavaScript

js实现深蓝

2026-03-13 17:00:31JavaScript

以下是使用JavaScript实现深蓝效果的几种方法，涵盖基础颜色设置、动态渐变以及交互效果：

基础深蓝色设置

在CSS或JavaScript中直接定义深蓝色（HEX或RGB格式）：

js实现深蓝

// HEX格式
const deepBlueHex = '#00008B';

// RGB格式
const deepBlueRgb = 'rgb(0, 0, 139)';

// 应用到元素
document.getElementById('element').style.backgroundColor = deepBlueHex;

动态渐变效果

通过CSS变量和JavaScript实现动态颜色渐变：

// 创建从深蓝到浅蓝的渐变
const element = document.querySelector('.gradient-box');
element.style.background = `linear-gradient(90deg, #00008B, #1E90FF)`;

// 动态控制渐变方向
function updateGradient(angle) {
    element.style.background = `linear-gradient(${angle}deg, #00008B, #1E90FF)`;
}

交互式颜色变化

结合事件监听实现鼠标悬停时的颜色变化：

js实现深蓝

const button = document.querySelector('.interactive-button');

button.addEventListener('mouseenter', () => {
    button.style.backgroundColor = '#00008B';
    button.style.transition = 'background-color 0.3s';
});

button.addEventListener('mouseleave', () => {
    button.style.backgroundColor = '#4169E1'; // 较浅的蓝色
});

Canvas绘制深蓝效果

使用Canvas API绘制动态深蓝色波纹：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function drawRipple() {
    ctx.fillStyle = '#00008B';
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, Math.PI * 2);
    ctx.fill();

    // 添加半透明效果
    ctx.fillStyle = 'rgba(0, 0, 139, 0.5)';
    ctx.beginPath();
    ctx.arc(100, 100, 70, 0, Math.PI * 2);
    ctx.fill();
}

SVG深蓝滤镜

通过SVG实现高级深蓝视觉效果：

<svg width="200" height="200">
    <defs>
        <filter id="deepBlueFilter">
            <feColorMatrix type="matrix" values="0 0 0 0 0
                                               0 0 0 0 0
                                               0 0 1 0 0
                                               0 0 0 1 0"/>
        </filter>
    </defs>
    <rect width="200" height="200" filter="url(#deepBlueFilter)" fill="#0000FF"/>
</svg>