| <!DOCTYPE html> |
| |
| <html><body> |
| <canvas id="c16" width="16" height="16"></canvas> |
| <canvas id="c48" width="48" height="48"></canvas> |
| <canvas id="c128" width="128" height="128"></canvas> |
| <script> |
| function drawIcon(canvas) { |
| const ctx = canvas.getContext('2d'); |
| const s = canvas.width; |
| const cx = s/2, cy = s/2, r = s*0.42; |
| |
| |
| ctx.fillStyle = '#0c150f'; |
| ctx.beginPath(); |
| ctx.roundRect(0, 0, s, s, s*0.18); |
| ctx.fill(); |
| |
| |
| ctx.strokeStyle = 'rgba(0,255,156,0.4)'; |
| ctx.lineWidth = s*0.04; |
| ctx.beginPath(); |
| ctx.arc(cx, cy, r, 0, Math.PI*2); |
| ctx.stroke(); |
| |
| |
| ctx.fillStyle = '#00ff9c'; |
| ctx.shadowColor = '#00ff9c'; |
| ctx.shadowBlur = s*0.15; |
| ctx.beginPath(); |
| ctx.arc(cx, cy, r*0.35, 0, Math.PI*2); |
| ctx.fill(); |
| |
| |
| ctx.strokeStyle = 'rgba(0,255,156,0.6)'; |
| ctx.lineWidth = s*0.03; |
| ctx.shadowBlur = 0; |
| ctx.beginPath(); |
| ctx.moveTo(cx - r*0.7, cy); ctx.lineTo(cx - r*0.45, cy); |
| ctx.moveTo(cx + r*0.45, cy); ctx.lineTo(cx + r*0.7, cy); |
| ctx.moveTo(cx, cy - r*0.7); ctx.lineTo(cx, cy - r*0.45); |
| ctx.moveTo(cx, cy + r*0.45); ctx.lineTo(cx, cy + r*0.7); |
| ctx.stroke(); |
| } |
| |
| ['c16','c48','c128'].forEach(id => { |
| const c = document.getElementById(id); |
| drawIcon(c); |
| const link = document.createElement('a'); |
| link.download = `icon${c.width}.png`; |
| link.href = c.toDataURL(); |
| link.textContent = `Download icon${c.width}.png`; |
| link.style.display = 'block'; |
| link.style.margin = '8px'; |
| document.body.appendChild(link); |
| }); |
| </script> |
| </body></html> |
|
|
