js实现彩色
JavaScript 实现彩色效果的方法
使用 CSS 样式动态修改颜色
通过 JavaScript 动态修改元素的 style 属性，实现颜色变化。
document.getElementById('elementId').style.color = 'red';
document.getElementById('elementId').style.backgroundColor = 'blue';使用 classList 切换 CSS 类
定义多个 CSS 类，通过 JavaScript 切换类名实现颜色变化。
.red-text {
color: red;
}
.blue-bg {
background-color: blue;
}const element = document.getElementById('elementId');
element.classList.add('red-text');
element.classList.add('blue-bg');使用 RGB 或 HSL 动态生成颜色 通过 JavaScript 生成随机的 RGB 或 HSL 颜色值。
function getRandomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`;
}
document.getElementById('elementId').style.color = getRandomColor();使用 Canvas 绘制彩色图形 通过 Canvas API 绘制彩色图形或文本。
const canvas = document.getElementById('canvasId');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);使用 SVG 动态修改颜色 通过 JavaScript 修改 SVG 元素的颜色属性。
document.getElementById('svgElement').setAttribute('fill', 'purple');使用渐变效果 通过 JavaScript 创建线性或径向渐变效果。
const canvas = document.getElementById('canvasId');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);使用第三方库（如 chroma.js） 通过第三方库实现更复杂的颜色操作。
const color = chroma('red').brighten(2).hex();
document.getElementById('elementId').style.color = color;
