84 lines
2.5 KiB
HTML
84 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>生成插件图标</title>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>生成插件图标</h1>
|
|
<p>点击下面的按钮生成图标，然后右键保存图片</p>
|
|
|
|
<canvas id="canvas16" width="16" height="16"></canvas>
|
|
<button onclick="downloadIcon(16)">下载 icon16.png</button>
|
|
<br><br>
|
|
|
|
<canvas id="canvas48" width="48" height="48"></canvas>
|
|
<button onclick="downloadIcon(48)">下载 icon48.png</button>
|
|
<br><br>
|
|
|
|
<canvas id="canvas128" width="128" height="128"></canvas>
|
|
<button onclick="downloadIcon(128)">下载 icon128.png</button>
|
|
|
|
<script>
|
|
function createIcon(size) {
|
|
const canvas = document.getElementById(`canvas${size}`);
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// 背景
|
|
const gradient = ctx.createLinearGradient(0, 0, size, size);
|
|
gradient.addColorStop(0, '#667eea');
|
|
gradient.addColorStop(1, '#764ba2');
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, 0, size, size);
|
|
|
|
// 绘制锁图标
|
|
ctx.fillStyle = 'white';
|
|
ctx.strokeStyle = 'white';
|
|
ctx.lineWidth = size / 8;
|
|
|
|
// 锁身
|
|
const lockWidth = size * 0.4;
|
|
const lockHeight = size * 0.5;
|
|
const lockX = (size - lockWidth) / 2;
|
|
const lockY = size * 0.3;
|
|
|
|
// 锁体
|
|
ctx.fillRect(lockX, lockY, lockWidth, lockHeight);
|
|
|
|
// 锁孔
|
|
ctx.fillStyle = '#667eea';
|
|
const holeSize = size * 0.15;
|
|
ctx.beginPath();
|
|
ctx.arc(lockX + lockWidth / 2, lockY + lockHeight * 0.6, holeSize / 2, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
|
|
// 锁扣
|
|
ctx.strokeStyle = 'white';
|
|
ctx.lineWidth = size / 12;
|
|
ctx.beginPath();
|
|
ctx.arc(lockX + lockWidth / 2, lockY, lockWidth * 0.3, Math.PI, 0, false);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function downloadIcon(size) {
|
|
const canvas = document.getElementById(`canvas${size}`);
|
|
canvas.toBlob(function (blob) {
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `icon${size}.png`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
});
|
|
}
|
|
|
|
// 创建图标
|
|
createIcon(16);
|
|
createIcon(48);
|
|
createIcon(128);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |