86 lines
3.0 KiB
HTML
86 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>生成图标</title>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas16" width="16" height="16"></canvas>
|
|
<canvas id="canvas48" width="48" height="48"></canvas>
|
|
<canvas id="canvas128" width="128" height="128"></canvas>
|
|
|
|
<script>
|
|
// 生成 16x16 图标
|
|
const canvas16 = document.getElementById('canvas16');
|
|
const ctx16 = canvas16.getContext('2d');
|
|
const gradient16 = ctx16.createLinearGradient(0, 0, 16, 16);
|
|
gradient16.addColorStop(0, '#667eea');
|
|
gradient16.addColorStop(1, '#764ba2');
|
|
ctx16.fillStyle = gradient16;
|
|
ctx16.fillRect(0, 0, 16, 16);
|
|
ctx16.fillStyle = 'white';
|
|
ctx16.font = 'bold 10px Arial';
|
|
ctx16.textAlign = 'center';
|
|
ctx16.textBaseline = 'middle';
|
|
ctx16.fillText('GA', 8, 8);
|
|
|
|
// 生成 48x48 图标
|
|
const canvas48 = document.getElementById('canvas48');
|
|
const ctx48 = canvas48.getContext('2d');
|
|
const gradient48 = ctx48.createLinearGradient(0, 0, 48, 48);
|
|
gradient48.addColorStop(0, '#667eea');
|
|
gradient48.addColorStop(1, '#764ba2');
|
|
ctx48.fillStyle = gradient48;
|
|
ctx48.fillRect(0, 0, 48, 48);
|
|
ctx48.fillStyle = 'white';
|
|
ctx48.font = 'bold 24px Arial';
|
|
ctx48.textAlign = 'center';
|
|
ctx48.textBaseline = 'middle';
|
|
ctx48.fillText('GA', 24, 24);
|
|
|
|
// 生成 128x128 图标
|
|
const canvas128 = document.getElementById('canvas128');
|
|
const ctx128 = canvas128.getContext('2d');
|
|
const gradient128 = ctx128.createLinearGradient(0, 0, 128, 128);
|
|
gradient128.addColorStop(0, '#667eea');
|
|
gradient128.addColorStop(1, '#764ba2');
|
|
ctx128.fillStyle = gradient128;
|
|
ctx128.fillRect(0, 0, 128, 128);
|
|
ctx128.fillStyle = 'white';
|
|
ctx128.font = 'bold 56px Arial';
|
|
ctx128.textAlign = 'center';
|
|
ctx128.textBaseline = 'middle';
|
|
ctx128.fillText('GA', 64, 64);
|
|
|
|
// 自动下载
|
|
setTimeout(() => {
|
|
['16', '48', '128'].forEach(size => {
|
|
const canvas = document.getElementById('canvas' + size);
|
|
canvas.toBlob(blob => {
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'icon' + size + '.png';
|
|
a.click();
|
|
});
|
|
});
|
|
}, 100);
|
|
</script>
|
|
|
|
<p>图标生成中，请保存下载的 PNG 文件到 icons 目录...</p>
|
|
<p>或者手动右键点击下面的图标保存：</p>
|
|
<div>
|
|
<h3>16x16:</h3>
|
|
<canvas id="preview16" width="16" height="16"></canvas>
|
|
</div>
|
|
<div>
|
|
<h3>48x48:</h3>
|
|
<canvas id="preview48" width="48" height="48"></canvas>
|
|
</div>
|
|
<div>
|
|
<h3>128x128:</h3>
|
|
<canvas id="preview128" width="128" height="128"></canvas>
|
|
</div>
|
|
</body>
|
|
</html>
|