<!DOCTYPE html>
<html>
<head>
<title>字帖生成器</title>
<style>
#container { margin: 20px; }
.controls { margin-bottom: 10px; }
canvas { border: 1px solid #ccc; }
</style>
</head>
<body>
<div class="controls">
<input type="text" id="textInput" placeholder="输入汉字" value="永">
<button onclick="generateCopybook()">生成</button>
<button onclick="exportImage()">导出图片</button>
<label>格子大小：<input type="number" id="gridSize" value="100"></label>
<label>字体大小：<input type="number" id="fontSize" value="60"></label>
</div>
<div id="container"></div>
<script>
function generateCopybook() {
const container = document.getElementById('container');
const text = document.getElementById('textInput').value;
const gridSize = parseInt(document.getElementById('gridSize').value);
const fontSize = parseInt(document.getElementById('fontSize').value);
container.innerHTML = ''; // 清空容器
// 创建画布
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const cols = 4; // 每行字数
const rows = Math.ceil(text.length / cols);
// 设置画布尺寸
canvas.width = cols * gridSize;
canvas.height = rows * gridSize;
canvas.style.border = '1px solid #ccc';
// 绘制田字格和文字
for (let i = 0; i < text.length; i++) {
const col = i % cols;
const row = Math.floor(i / cols);
// 绘制格子
drawGrid(ctx, col * gridSize, row * gridSize, gridSize);
// 绘制文字
drawCharacter(
ctx,
text[i],
col * gridSize + gridSize/2,
row * gridSize + gridSize/2,
fontSize
);
}
container.appendChild(canvas);
}
function drawGrid(ctx, x, y, size) {
ctx.strokeStyle = '#ddd';
ctx.lineWidth = 1;
// 外边框
ctx.strokeRect(x, y, size, size);
// 中心线
ctx.beginPath();
ctx.moveTo(x + size/2, y);
ctx.lineTo(x + size/2, y + size);
ctx.moveTo(x, y + size/2);
ctx.lineTo(x + size, y + size/2);
ctx.stroke();
}
function drawCharacter(ctx, char, x, y, fontSize) {
ctx.font = `${fontSize}px '楷体', sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillText(char, x, y);
}
function exportImage() {
const canvas = document.querySelector('canvas');
const link = document.createElement('a');
link.download = 'copybook.png';
link.href = canvas.toDataURL();
link.click();
}
// 初始生成
generateCopybook();
</script>
</body>
</html>
