<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机图像生成模拟器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
h1 {
text-align: center;
color: white;
margin-bottom: 30px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.main-content {
display: grid;
grid-template-columns: 1fr 400px;
gap: 20px;
margin-bottom: 20px;
}
@media (max-width: 1200px) {
.main-content {
grid-template-columns: 1fr;
}
}
.canvas-container {
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
#canvas {
width: 100%;
height: 600px;
border: 3px solid #ddd;
border-radius: 10px;
cursor: crosshair;
}
.control-panel {
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
overflow-y: auto;
max-height: 700px;
}
.section {
margin-bottom: 25px;
}
.section-title {
font-size: 1.2em;
color: #667eea;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 2px solid #667eea;
}
.btn {
width: 100%;
padding: 12px;
margin: 5px 0;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
font-weight: bold;
transition: all 0.3s;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-success {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white;
}
.btn-warning {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.btn:active {
transform: translateY(0);
}
.module-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
.module-btn {
padding: 10px;
border: 2px solid #667eea;
background: white;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
font-size: 0.9em;
}
.module-btn:hover {
background: #667eea;
color: white;
}
.slider-group {
margin: 15px 0;
}
.slider-label {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
color: #333;
}
input[type="range"] {
width: 100%;
height: 8px;
border-radius: 5px;
background: #ddd;
outline: none;
-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #667eea;
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #667eea;
cursor: pointer;
}
.layer-list {
max-height: 200px;
overflow-y: auto;
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
margin-top: 10px;
}
.layer-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
margin: 5px 0;
background: #f5f5f5;
border-radius: 5px;
}
.layer-item button {
background: #f5576c;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.info-box {
background: #f0f4ff;
border-left: 4px solid #667eea;
padding: 15px;
border-radius: 5px;
margin-top: 10px;
}
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
.stat-item {
background: #f5f5f5;
padding: 10px;
border-radius: 5px;
text-align: center;
}
.stat-value {
font-size: 1.5em;
color: #667eea;
font-weight: bold;
}
.stat-label {
font-size: 0.9em;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>🎨 随机图像生成模拟器</h1>
<div class="main-content">
<div class="canvas-container">
<canvas id="canvas" width="800" height="600"></canvas>
<div class="stats">
<div class="stat-item">
<div class="stat-value" id="layerCount">0</div>
<div class="stat-label">图层数量</div>
</div>
<div class="stat-item">
<div class="stat-value" id="moduleCount">0</div>
<div class="stat-label">模块总数</div>
</div>
</div>
</div>
<div class="control-panel">
<div class="section">
<div class="section-title">⚡ 快速生成</div>
<button class="btn btn-primary" onclick="generateRandom()">🎲 随机生成图像</button>
<button class="btn btn-warning" onclick="clearCanvas()">🗑️ 清空画布</button>
<button class="btn btn-success" onclick="saveImage()">💾 保存图像</button>
</div>
<div class="section">
<div class="section-title">📦 随机模块库</div>
<div class="module-grid">
<button class="module-btn" onclick="addModule('circle')">⭕ 圆形</button>
<button class="module-btn" onclick="addModule('rectangle')">⬜ 矩形</button>
<button class="module-btn" onclick="addModule('triangle')">🔺 三角形</button>
<button class="module-btn" onclick="addModule('line')">📏 线条</button>
<button class="module-btn" onclick="addModule('star')">⭐ 星形</button>
<button class="module-btn" onclick="addModule('hexagon')">⬡ 六边形</button>
<button class="module-btn" onclick="addModule('spiral')">🌀 螺旋</button>
<button class="module-btn" onclick="addModule('wave')">〰️ 波浪</button>
<button class="module-btn" onclick="addModule('dots')">⚫ 点阵</button>
<button class="module-btn" onclick="addModule('gradient')">🌈 渐变</button>
<button class="module-btn" onclick="addModule('pattern')">🎭 图案</button>
<button class="module-btn" onclick="addModule('glitch')">💥 故障效果</button>
</div>
</div>
<div class="section">
<div class="section-title">⚙️ 生成参数</div>
<div class="slider-group">
<div class="slider-label">
<span>图层数量</span>
<span id="layerValue">5</span>
</div>
<input type="range" id="layerSlider" min="1" max="20" value="5" oninput="updateLayerValue()">
</div>
<div class="slider-group">
<div class="slider-label">
<span>颜色饱和度</span>
<span id="saturationValue">80%</span>
</div>
<input type="range" id="saturationSlider" min="0" max="100" value="80" oninput="updateSaturationValue()">
</div>
<div class="slider-group">
<div class="slider-label">
<span>透明度范围</span>
<span id="opacityValue">0.3-0.8</span>
</div>
<input type="range" id="opacitySlider" min="1" max="10" value="5" oninput="updateOpacityValue()">
</div>
</div>
<div class="section">
<div class="section-title">📋 图层列表</div>
<div class="layer-list" id="layerList">
<div class="info-box">暂无图层，请添加模块或随机生成</div>
</div>
</div>
<div class="section">
<div class="section-title">💡 使用说明</div>
<div class="info-box">
<p>• 点击"随机生成图像"可自动组合模块</p>
<p>• 点击模块按钮可单独添加</p>
<p>• 调整参数后重新生成</p>
<p>• 可保存生成的图像</p>
</div>
</div>
</div>
</div>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let layers = [];
let moduleCount = 0;
let layerData = []; // 存储图层的实际绘制数据
// 初始化画布
function initCanvas() {
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
layers = [];
layerData = [];
updateLayerList();
}
// 生成随机颜色
function getRandomColor() {
const saturation = document.getElementById('saturationSlider').value;
const hue = Math.floor(Math.random() * 360);
const lightness = 40 + Math.random() * 40;
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}
// 生成随机透明度
function getRandomOpacity() {
const opacityLevel = document.getElementById('opacitySlider').value;
const minOpacity = opacityLevel * 0.1;
const maxOpacity = Math.min(minOpacity + 0.5, 1);
return minOpacity + Math.random() * (maxOpacity - minOpacity);
}
// 添加随机圆形
function addCircle() {
const radius = 20 + Math.random() * 150;
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const color = getRandomColor();
const opacity = getRandomOpacity();
ctx.save();
ctx.globalAlpha = opacity;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
return { type: '圆形', x, y, radius, color, opacity };
}
// 添加随机矩形
function addRectangle() {
const width = 50 + Math.random() * 300;
const height = 50 + Math.random() * 300;
const x = Math.random() * (canvas.width - width);
const y = Math.random() * (canvas.height - height);
const color = getRandomColor();
const opacity = getRandomOpacity();
ctx.save();
ctx.globalAlpha = opacity;
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
ctx.restore();
return { type: '矩形', x, y, width, height, color, opacity };
}
// 添加随机三角形
function addTriangle() {
const size = 50 + Math.random() * 150;
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const color = getRandomColor();
const opacity = getRandomOpacity();
ctx.save();
ctx.globalAlpha = opacity;
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(x, y - size);
ctx.lineTo(x - size, y + size);
ctx.lineTo(x + size, y + size);
ctx.closePath();
ctx.fill();
ctx.restore();
return { type: '三角形', x, y, size, color, opacity };
}
// 添加随机线条
function addLine() {
const x1 = Math.random() * canvas.width;
const y1 = Math.random() * canvas.height;
const x2 = Math.random() * canvas.width;
const y2 = Math.random() * canvas.height;
const lineWidth = 2 + Math.random() * 20;
const color = getRandomColor();
const opacity = getRandomOpacity();
ctx.save();
ctx.globalAlpha = opacity;
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
ctx.restore();
return { type: '线条', x1, y1, x2, y2, lineWidth, color, opacity };
}
// 添加星形
function addStar() {
const centerX = Math.random() * canvas.width;
const centerY = Math.random() * canvas.height;
const spikes = 5 + Math.floor(Math.random() * 5);
const outerRadius = 30 + Math.random() * 100;
const innerRadius = outerRadius * 0.5;
const color = getRandomColor();
const opacity = getRandomOpacity();
ctx.save();
ctx.globalAlpha = opacity;
ctx.fillStyle = color;
ctx.beginPath();
for (let i = 0; i < spikes * 2; i++) {
const radius = i % 2 === 0 ? outerRadius : innerRadius;
const angle = (i * Math.PI) / spikes - Math.PI / 2;
const x = centerX + Math.cos(angle) * radius;
const y = centerY + Math.sin(angle) * radius;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
ctx.restore();
return { type: '星形', centerX, centerY, spikes, color, opacity };
}
// 添加六边形
function addHexagon() {
const centerX = Math.random() * canvas.width;
const centerY = Math.random() * canvas.height;
const radius = 30 + Math.random() * 100;
const color = getRandomColor();
const opacity = getRandomOpacity();
ctx.save();
ctx.globalAlpha = opacity;
ctx.fillStyle = color;
ctx.beginPath();
for (let i = 0; i < 6; i++) {
const angle = (i * Math.PI) / 3;
const x = centerX + Math.cos(angle) * radius;
const y = centerY + Math.sin(angle) * radius;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
ctx.restore();
return { type: '六边形', centerX, centerY, radius, color, opacity };
}
// 添加螺旋
function addSpiral() {
const centerX = Math.random() * canvas.width;
const centerY = Math.random() * canvas.height;
const coils = 3 + Math.random() * 5;
const radius = 50 + Math.random() * 100;
const color = getRandomColor();
const opacity = getRandomOpacity();
ctx.save();
ctx.globalAlpha = opacity;
ctx.strokeStyle = color;
ctx.lineWidth = 2 + Math.random() * 5;
ctx.lineCap = 'round';
ctx.beginPath();
for (let i = 0; i < coils * 360; i++) {
const angle = (i * Math.PI) / 180;
const r = (radius * i) / (coils * 360);
const x = centerX + Math.cos(angle) * r;
const y = centerY + Math.sin(angle) * r;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
return { type: '螺旋', centerX, centerY, coils, color, opacity };
}
// 添加波浪
function addWave() {
const startY = Math.random() * canvas.height;
const amplitude = 20 + Math.random() * 50;
const frequency = 0.02 + Math.random() * 0.05;
const color = getRandomColor();
const opacity = getRandomOpacity();
ctx.save();
ctx.globalAlpha = opacity;
ctx.strokeStyle = color;
ctx.lineWidth = 3 + Math.random() * 10;
ctx.beginPath();
ctx.moveTo(0, startY);
for (let x = 0; x <= canvas.width; x++) {
const y = startY + Math.sin(x * frequency) * amplitude;
ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
return { type: '波浪', startY, amplitude, frequency, color, opacity };
}
// 添加点阵
function addDots() {
const dotCount = 50 + Math.floor(Math.random() * 200);
const color = getRandomColor();
const opacity = getRandomOpacity();
ctx.save();
ctx.globalAlpha = opacity;
for (let i = 0; i < dotCount; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const radius = 2 + Math.random() * 8;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
}
ctx.restore();
return { type: '点阵', dotCount, color, opacity };
}
// 添加渐变
function addGradient() {
const x1 = Math.random() * canvas.width;
const y1 = Math.random() * canvas.height;
const x2 = Math.random() * canvas.width;
const y2 = Math.random() * canvas.height;
const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
const opacity = getRandomOpacity();
gradient.addColorStop(0, getRandomColor());
gradient.addColorStop(0.5, getRandomColor());
gradient.addColorStop(1, getRandomColor());
ctx.save();
ctx.globalAlpha = opacity;
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();
return { type: '渐变', x1, y1, x2, y2, opacity };
}
// 添加图案
function addPattern() {
const patternType = Math.floor(Math.random() * 3);
const color = getRandomColor();
const opacity = getRandomOpacity();
ctx.save();
ctx.globalAlpha = opacity;
ctx.strokeStyle = color;
ctx.lineWidth = 2;
if (patternType === 0) {
// 网格图案
const gridSize = 20 + Math.random() * 30;
for (let x = 0; x < canvas.width; x += gridSize) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
for (let y = 0; y < canvas.height; y += gridSize) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
} else if (patternType === 1) {
// 对角线图案
const spacing = 30 + Math.random() * 40;
for (let i = -canvas.height; i < canvas.width; i += spacing) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i + canvas.height, canvas.height);
ctx.stroke();
}
} else {
// 同心圆图案
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const maxRadius = Math.sqrt(centerX * centerX + centerY * centerY);
const spacing = 30 + Math.random() * 40;
for (let r = spacing; r < maxRadius; r += spacing) {
ctx.beginPath();
ctx.arc(centerX, centerY, r, 0, Math.PI * 2);
ctx.stroke();
}
}
ctx.restore();
return { type: '图案', patternType, color, opacity };
}
// 添加故障效果
function addGlitch() {
const sliceCount = 5 + Math.floor(Math.random() * 10);
for (let i = 0; i < sliceCount; i++) {
const y = Math.random() * canvas.height;
const height = 5 + Math.random() * 30;
const offsetX = (Math.random() - 0.5) * 50;
const imageData = ctx.getImageData(0, y, canvas.width, height);
ctx.putImageData(imageData, offsetX, y);
}
return { type: '故障效果', sliceCount };
}
// 添加模块
function addModule(type) {
let layerInfo = null;
switch(type) {
case 'circle':
layerInfo = addCircle();
break;
case 'rectangle':
layerInfo = addRectangle();
break;
case 'triangle':
layerInfo = addTriangle();
break;
case 'line':
layerInfo = addLine();
break;
case 'star':
layerInfo = addStar();
break;
case 'hexagon':
layerInfo = addHexagon();
break;
case 'spiral':
layerInfo = addSpiral();
break;
case 'wave':
layerInfo = addWave();
break;
case 'dots':
layerInfo = addDots();
break;
case 'gradient':
layerInfo = addGradient();
break;
case 'pattern':
layerInfo = addPattern();
break;
case 'glitch':
layerInfo = addGlitch();
break;
}
if (layerInfo) {
layers.push(layerInfo);
layerData.push(layerInfo);
moduleCount++;
updateLayerList();
}
}
// 随机生成图像
function generateRandom() {
clearCanvas();
const layerCount = parseInt(document.getElementById('layerSlider').value);
const moduleTypes = ['circle', 'rectangle', 'triangle', 'line', 'star', 'hexagon',
'spiral', 'wave', 'dots', 'gradient', 'pattern', 'glitch'];
for (let i = 0; i < layerCount; i++) {
const randomType = moduleTypes[Math.floor(Math.random() * moduleTypes.length)];
addModule(randomType);
}
}
// 清空画布
function clearCanvas() {
initCanvas();
moduleCount = 0;
}
// 保存图像
function saveImage() {
const link = document.createElement('a');
link.download = `随机图像_${Date.now()}.png`;
link.href = canvas.toDataURL();
link.click();
}
// 更新图层列表
function updateLayerList() {
const layerList = document.getElementById('layerList');
if (layers.length === 0) {
layerList.innerHTML = '<div class="info-box">暂无图层，请添加模块或随机生成</div>';
} else {
layerList.innerHTML = '';
layers.forEach((layer, index) => {
const layerItem = document.createElement('div');
layerItem.className = 'layer-item';
layerItem.innerHTML = `
<span>${index + 1}. ${layer.type}</span>
<button onclick="removeLayer(${index})">删除</button>
`;
layerList.appendChild(layerItem);
});
}
document.getElementById('layerCount').textContent = layers.length;
document.getElementById('moduleCount').textContent = moduleCount;
}
// 删除图层（重绘所有剩余图层）
function removeLayer(index) {
layers.splice(index, 1);
layerData.splice(index, 1);
redrawCanvas();
updateLayerList();
}
// 重绘画布
function redrawCanvas() {
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
layerData.forEach(layer => {
switch(layer.type) {
case '圆形':
ctx.save();
ctx.globalAlpha = layer.opacity;
ctx.fillStyle = layer.color;
ctx.beginPath();
ctx.arc(layer.x, layer.y, layer.radius, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
break;
case '矩形':
ctx.save();
ctx.globalAlpha = layer.opacity;
ctx.fillStyle = layer.color;
ctx.fillRect(layer.x, layer.y, layer.width, layer.height);
ctx.restore();
break;
case '三角形':
ctx.save();
ctx.globalAlpha = layer.opacity;
ctx.fillStyle = layer.color;
ctx.beginPath();
ctx.moveTo(layer.x, layer.y - layer.size);
ctx.lineTo(layer.x - layer.size, layer.y + layer.size);
ctx.lineTo(layer.x + layer.size, layer.y + layer.size);
ctx.closePath();
ctx.fill();
ctx.restore();
break;
case '线条':
ctx.save();
ctx.globalAlpha = layer.opacity;
ctx.strokeStyle = layer.color;
ctx.lineWidth = layer.lineWidth;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(layer.x1, layer.y1);
ctx.lineTo(layer.x2, layer.y2);
ctx.stroke();
ctx.restore();
break;
case '星形':
ctx.save();
ctx.globalAlpha = layer.opacity;
ctx.fillStyle = layer.color;
ctx.beginPath();
for (let i = 0; i < layer.spikes * 2; i++) {
const radius = i % 2 === 0 ? 60 : 30;
const angle = (i * Math.PI) / layer.spikes - Math.PI / 2;
const x = layer.centerX + Math.cos(angle) * radius;
const y = layer.centerY + Math.sin(angle) * radius;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
ctx.restore();
break;
case '六边形':
ctx.save();
ctx.globalAlpha = layer.opacity;
ctx.fillStyle = layer.color;
ctx.beginPath();
for (let i = 0; i < 6; i++) {
const angle = (i * Math.PI) / 3;
const x = layer.centerX + Math.cos(angle) * layer.radius;
const y = layer.centerY + Math.sin(angle) * layer.radius;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
ctx.restore();
break;
case '螺旋':
ctx.save();
ctx.globalAlpha = layer.opacity;
ctx.strokeStyle = layer.color;
ctx.lineWidth = 3;
ctx.lineCap = 'round';
ctx.beginPath();
const radius = 80;
for (let i = 0; i < layer.coils * 360; i++) {
const angle = (i * Math.PI) / 180;
const r = (radius * i) / (layer.coils * 360);
const x = layer.centerX + Math.cos(angle) * r;
const y = layer.centerY + Math.sin(angle) * r;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
break;
case '波浪':
ctx.save();
ctx.globalAlpha = layer.opacity;
ctx.strokeStyle = layer.color;
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(0, layer.startY);
for (let x = 0; x <= canvas.width; x++) {
const y = layer.startY + Math.sin(x * layer.frequency) * layer.amplitude;
ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
break;
case '点阵':
ctx.save();
ctx.globalAlpha = layer.opacity;
ctx.fillStyle = layer.color;
for (let i = 0; i < layer.dotCount; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const radius = 2 + Math.random() * 8;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
}
ctx.restore();
break;
case '渐变':
ctx.save();
ctx.globalAlpha = layer.opacity;
const gradient = ctx.createLinearGradient(layer.x1, layer.y1, layer.x2, layer.y2);
gradient.addColorStop(0, '#667eea');
gradient.addColorStop(0.5, '#764ba2');
gradient.addColorStop(1, '#f093fb');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();
break;
case '图案':
ctx.save();
ctx.globalAlpha = layer.opacity;
ctx.strokeStyle = layer.color;
ctx.lineWidth = 2;
if (layer.patternType === 0) {
const gridSize = 30;
for (let x = 0; x < canvas.width; x += gridSize) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
for (let y = 0; y < canvas.height; y += gridSize) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
}
ctx.restore();
break;
}
});
}
// 更新滑块值显示
function updateLayerValue() {
document.getElementById('layerValue').textContent = document.getElementById('layerSlider').value;
}
function updateSaturationValue() {
document.getElementById('saturationValue').textContent = document.getElementById('saturationSlider').value + '%';
}
function updateOpacityValue() {
const opacityLevel = document.getElementById('opacitySlider').value;
const minOpacity = opacityLevel * 0.1;
const maxOpacity = Math.min(minOpacity + 0.5, 1);
document.getElementById('opacityValue').textContent = `${minOpacity.toFixed(1)}-${maxOpacity.toFixed(1)}`;
}
// 初始化
initCanvas();
</script>
</body>
</html>
index.html
index.html