29.Color Picker

<!DOCTYPE html>

<head>

<title>颜色选择器</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background: linear-gradient(45deg, #3498db, #8e44ad);

}

.container {

background: rgba(255, 255, 255, 0.1);

padding: 2em;

border-radius: 10px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

backdrop-filter: blur(10px);

}

canvas {

border: 1px solid #fff;

cursor: crosshair;

}

.color-display {

margin-top: 1em;

display: flex;

align-items: center;

}

.color-preview {

width: 50px;

height: 50px;

border: 1px solid #fff;

margin-right: 1em;

}

.color-values {

display: flex;

flex-direction: column;

}

input {

margin: 0.2em 0;

padding: 0.3em;

border: none;

border-radius: 3px;

}

</style>

</head>

<body>

</div>

const canvas = document.getElementById('colorCanvas');

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

const colorPreview = document.getElementById('colorPreview');

const hexValue = document.getElementById('hexValue');

const rgbValue = document.getElementById('rgbValue');

const rgbaValue = document.getElementById('rgbaValue');

function drawColorWheel() {

const centerX = canvas.width / 2;

const centerY = canvas.height / 2;

const radius = Math.min(centerX, centerY);

for (let angle = 0; angle < 360; angle++) {

const startAngle = (angle - 2) * Math.PI / 180;

const endAngle = (angle + 2) * Math.PI / 180;

ctx.beginPath();

ctx.moveTo(centerX, centerY);

ctx.arc(centerX, centerY, radius, startAngle, endAngle);

ctx.closePath();

const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);

gradient.addColorStop(0, 'hsl(' + angle + ', 100%, 100%)');

gradient.addColorStop(1, 'hsl(' + angle + ', 100%, 50%)');

ctx.fillStyle = gradient;

ctx.fill();

}

function rgbToHex(r, g, b) {

return '#' + [r, g, b].map(x => {

const hex = x.toString(16);

return hex.length === 1 ? '0' + hex : hex;

}).join('');

}

function updateColorValues(x, y) {

const imageData = ctx.getImageData(x, y, 1, 1).data;

const [r, g, b, a] = imageData;

const hex = rgbToHex(r, g, b);

const rgb = `rgb(${r}, ${g}, ${b})`;

const rgba = `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(2)})`;

colorPreview.style.backgroundColor = rgb;

hexValue.value = hex;

rgbValue.value = rgb;

rgbaValue.value = rgba;

}

canvas.addEventListener('mousemove', (event) => {

const rect = canvas.getBoundingClientRect();

const x = event.clientX - rect.left;

const y = event.clientY - rect.top;

updateColorValues(x, y);

});

canvas.addEventListener('click', (event) => {

const rect = canvas.getBoundingClientRect();

const x = event.clientX - rect.left;

const y = event.clientY - rect.top;

updateColorValues(x, y);

});

drawColorWheel();

</script>

</body>

</html>