(canvasId)
| 1 | // static/visualizer.js |
| 2 | class TechVisualizer { |
| 3 | constructor(canvasId) { |
| 4 | this.canvas = document.getElementById(canvasId); |
| 5 | this.ctx = this.canvas.getContext('2d'); |
| 6 | this.ws = null; |
| 7 | this.data = {}; |
| 8 | |
| 9 | // 科技感配色方案 |
| 10 | this.colors = { |
| 11 | primary: '#00D9FF', // 青蓝色 |
| 12 | secondary: '#FF00FF', // 品红/紫色 |
| 13 | accent: '#00FF88', // 青绿色 |
| 14 | warning: '#FFAA00', // 橙色 |
| 15 | background: '#000000', // 黑色 |
| 16 | surface: '#0A0A0A', // 深灰 |
| 17 | text: '#FFFFFF', // 白色 |
| 18 | textMuted: '#888888', // 灰色 |
| 19 | grid: '#1A1A1A', // 网格色 |
| 20 | glow: '#00D9FF55' // 发光效果 |
| 21 | }; |
| 22 | |
| 23 | // 字体设置 |
| 24 | this.fonts = { |
| 25 | title: 'bold 24px "Orbitron", "Microsoft YaHei", sans-serif', |
| 26 | subtitle: 'bold 18px "Rajdhani", "Microsoft YaHei", sans-serif', |
| 27 | body: '16px "Roboto", "Microsoft YaHei", sans-serif', |
| 28 | small: '12px "Roboto", "Microsoft YaHei", sans-serif', |
| 29 | tiny: '10px "Roboto", sans-serif' |
| 30 | }; |
| 31 | |
| 32 | this.setupCanvas(); |
| 33 | this.connectWebSocket(); |
| 34 | } |
| 35 | |
| 36 | setupCanvas() { |
| 37 | // 设置画布大小 |
nothing calls this directly
no test coverage detected