js实现方格
以下是使用JavaScript实现方格的几种常见方法，涵盖基础HTML/CSS渲染、Canvas绘制以及动态交互效果：
基础HTML/CSS实现
通过DOM元素和CSS网格布局快速生成方格：
<div id="grid-container" style="display: grid; grid-template-columns: repeat(5, 50px); gap: 2px;"></div>
<script>
const container = document.getElementById('grid-container');
for (let i = 0; i < 25; i++) {
const cell = document.createElement('div');
cell.style.height = '50px';
cell.style.backgroundColor = i % 2 === 0 ? '#ccc' : '#fff';
container.appendChild(cell);
}
</script>Canvas绘制方格
使用Canvas API实现可自定义的方格：
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
const size = 30; // 每个方格大小
const cols = canvas.width / size;
const rows = canvas.height / size;
for (let x = 0; x < cols; x++) {
for (let y = 0; y < rows; y++) {
ctx.strokeStyle = '#333';
ctx.strokeRect(x * size, y * size, size, size);
}
}动态交互方格
结合事件监听实现点击变色效果：
const grid = document.getElementById('grid-container');
grid.addEventListener('click', (e) => {
if (e.target !== grid) {
e.target.style.backgroundColor = `hsl(${Math.random() * 360}, 70%, 50%)`;
}
});响应式方格布局
通过CSS变量和JavaScript动态调整方格尺寸：
:root {
--grid-size: 10;
}
.grid-cell {
width: calc(100% / var(--grid-size));
aspect-ratio: 1;
}function resizeGrid(newSize) {
document.documentElement.style.setProperty('--grid-size', newSize);
}性能优化建议
对于大规模方格（如1000+单元格），推荐使用虚拟滚动技术或Canvas渲染。DOM方式在元素过多时可能导致性能下降。
