132 lines
3.8 KiB
HTML
132 lines
3.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>PWA图标生成器</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
.icon-container {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 20px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
.icon-item {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.icon-item canvas {
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
background-color: #409EFF;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 10px 15px;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
button:hover {
|
||
|
|
background-color: #3a8ee6;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>PWA图标生成器</h1>
|
||
|
|
<p>此页面用于生成PWA所需的不同尺寸图标。右键点击图标并选择"另存为"来下载。</p>
|
||
|
|
|
||
|
|
<button id="generateIcons">生成图标</button>
|
||
|
|
|
||
|
|
<div class="icon-container" id="iconContainer"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.getElementById('generateIcons').addEventListener('click', function() {
|
||
|
|
const container = document.getElementById('iconContainer');
|
||
|
|
container.innerHTML = '';
|
||
|
|
|
||
|
|
// 需要生成的图标尺寸
|
||
|
|
const sizes = [
|
||
|
|
{ size: 72, name: 'icon-72x72.png' },
|
||
|
|
{ size: 96, name: 'icon-96x96.png' },
|
||
|
|
{ size: 128, name: 'icon-128x128.png' },
|
||
|
|
{ size: 144, name: 'icon-144x144.png' },
|
||
|
|
{ size: 152, name: 'icon-152x152.png' },
|
||
|
|
{ size: 192, name: 'icon-192x192.png' },
|
||
|
|
{ size: 384, name: 'icon-384x384.png' },
|
||
|
|
{ size: 512, name: 'icon-512x512.png' }
|
||
|
|
];
|
||
|
|
|
||
|
|
sizes.forEach(item => {
|
||
|
|
const canvas = document.createElement('canvas');
|
||
|
|
canvas.width = item.size;
|
||
|
|
canvas.height = item.size;
|
||
|
|
const ctx = canvas.getContext('2d');
|
||
|
|
|
||
|
|
// 绘制背景
|
||
|
|
ctx.fillStyle = '#409EFF';
|
||
|
|
ctx.fillRect(0, 0, item.size, item.size);
|
||
|
|
|
||
|
|
// 绘制圆角
|
||
|
|
ctx.globalCompositeOperation = 'destination-in';
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.roundRect(0, 0, item.size, item.size, item.size * 0.125);
|
||
|
|
ctx.fill();
|
||
|
|
ctx.globalCompositeOperation = 'source-over';
|
||
|
|
|
||
|
|
// 绘制图标
|
||
|
|
const center = item.size / 2;
|
||
|
|
const outerRadius = center * 0.75;
|
||
|
|
const innerRadius = center * 0.5;
|
||
|
|
const dotRadius = center * 0.125;
|
||
|
|
|
||
|
|
// 外圆
|
||
|
|
ctx.fillStyle = 'white';
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(center, center, outerRadius, 0, 2 * Math.PI);
|
||
|
|
ctx.fill();
|
||
|
|
|
||
|
|
// 内圆
|
||
|
|
ctx.fillStyle = '#409EFF';
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(center, center, innerRadius, 0, 2 * Math.PI);
|
||
|
|
ctx.fill();
|
||
|
|
|
||
|
|
// 中心点
|
||
|
|
ctx.fillStyle = 'white';
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(center, center, dotRadius, 0, 2 * Math.PI);
|
||
|
|
ctx.fill();
|
||
|
|
|
||
|
|
// 创建容器
|
||
|
|
const iconItem = document.createElement('div');
|
||
|
|
iconItem.className = 'icon-item';
|
||
|
|
|
||
|
|
// 添加标题
|
||
|
|
const title = document.createElement('div');
|
||
|
|
title.textContent = `${item.name} (${item.size}x${item.size})`;
|
||
|
|
iconItem.appendChild(title);
|
||
|
|
|
||
|
|
// 添加画布
|
||
|
|
iconItem.appendChild(canvas);
|
||
|
|
|
||
|
|
// 添加下载链接
|
||
|
|
const downloadLink = document.createElement('a');
|
||
|
|
downloadLink.href = canvas.toDataURL('image/png');
|
||
|
|
downloadLink.download = item.name;
|
||
|
|
downloadLink.textContent = '下载';
|
||
|
|
downloadLink.style.display = 'block';
|
||
|
|
downloadLink.style.marginTop = '5px';
|
||
|
|
iconItem.appendChild(downloadLink);
|
||
|
|
|
||
|
|
container.appendChild(iconItem);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|