72 lines
2.6 KiB
HTML
72 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>生成小程序图标</title>
|
||
</head>
|
||
<body>
|
||
<h2>小程序底部导航图标生成器</h2>
|
||
<div id="icons"></div>
|
||
|
||
<script>
|
||
// 生成简单的图标（使用Canvas）
|
||
const icons = [
|
||
{ name: 'home', color: '#666', activeColor: '#FF4D4F', text: '首' },
|
||
{ name: 'match', color: '#666', activeColor: '#FF4D4F', text: '匹' },
|
||
{ name: 'my', color: '#666', activeColor: '#FF4D4F', text: '我' }
|
||
];
|
||
|
||
const container = document.getElementById('icons');
|
||
|
||
icons.forEach(icon => {
|
||
// 普通状态
|
||
const canvas1 = document.createElement('canvas');
|
||
canvas1.width = 81;
|
||
canvas1.height = 81;
|
||
const ctx1 = canvas1.getContext('2d');
|
||
ctx1.fillStyle = icon.color;
|
||
ctx1.font = 'bold 48px Arial';
|
||
ctx1.textAlign = 'center';
|
||
ctx1.textBaseline = 'middle';
|
||
ctx1.fillText(icon.text, 40, 40);
|
||
|
||
// 激活状态
|
||
const canvas2 = document.createElement('canvas');
|
||
canvas2.width = 81;
|
||
canvas2.height = 81;
|
||
const ctx2 = canvas2.getContext('2d');
|
||
ctx2.fillStyle = icon.activeColor;
|
||
ctx2.font = 'bold 48px Arial';
|
||
ctx2.textAlign = 'center';
|
||
ctx2.textBaseline = 'middle';
|
||
ctx2.fillText(icon.text, 40, 40);
|
||
|
||
// 显示并提供下载
|
||
const div = document.createElement('div');
|
||
div.style.margin = '20px';
|
||
div.innerHTML = `
|
||
<h3>${icon.name}</h3>
|
||
<p>普通状态: <a href="${canvas1.toDataURL()}" download="${icon.name}.png">下载</a></p>
|
||
<img src="${canvas1.toDataURL()}" style="border:1px solid #ccc">
|
||
<p>激活状态: <a href="${canvas2.toDataURL()}" download="${icon.name}-active.png">下载</a></p>
|
||
<img src="${canvas2.toDataURL()}" style="border:1px solid #ccc">
|
||
`;
|
||
container.appendChild(div);
|
||
|
||
// 自动下载
|
||
setTimeout(() => {
|
||
const a1 = document.createElement('a');
|
||
a1.href = canvas1.toDataURL();
|
||
a1.download = `${icon.name}.png`;
|
||
a1.click();
|
||
|
||
const a2 = document.createElement('a');
|
||
a2.href = canvas2.toDataURL();
|
||
a2.download = `${icon.name}-active.png`;
|
||
a2.click();
|
||
}, 100);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|