body { font-family: Arial, sans-serif; text-align: center; } canvas { border: 1px solid #000; } #palette { margin-top: 20px; } .color { display: inline-block; width: 40px; height: 40px; cursor: pointer; border: 2px solid #fff; margin: 5px; }

Онлайн-раскраска

const canvas = document.getElementById('coloringCanvas'); const context = canvas.getContext('2d'); let currentColor = 'black'; // Загрузка изображения для раскрашивания const img = new Image(); img.src = 'ras_2.12.01_1.png'; // Убедитесь, что путь правильный img.onload = () => { context.drawImage(img, 0, 0, canvas.width, canvas.height); }; // Обработка кликов по палитре цветов const colors = document.querySelectorAll('.color'); colors.forEach(color => { color.addEventListener('click', () => { currentColor = color.style.backgroundColor; }); }); // Обработка кликов по холсту canvas.addEventListener('click', (event) => { const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; // Получение цвета пикселя const pixelData = context.getImageData(x, y, 1, 1).data; const [r, g, b, a] = pixelData; // Если пиксель не прозрачный, раскрашиваем его // Измените условие, если хотите раскрашивать все пиксели if (a === 0 || (r === 255 && g === 255 && b === 255)) { // Прозрачный или белый context.fillStyle = currentColor; context.fillRect(x, y, 1, 1); } });