| 410 | } |
| 411 | |
| 412 | drawProgressBar(x, y, width, height, value, label, color) { |
| 413 | const ctx = this.ctx; |
| 414 | |
| 415 | // 背景 |
| 416 | ctx.fillStyle = this.colors.surface; |
| 417 | ctx.fillRect(x, y, width, height); |
| 418 | |
| 419 | // 边框 |
| 420 | ctx.strokeStyle = color + '44'; |
| 421 | ctx.lineWidth = 1; |
| 422 | ctx.strokeRect(x, y, width, height); |
| 423 | |
| 424 | // 填充 |
| 425 | const fillWidth = width * Math.max(0, Math.min(1, value)); |
| 426 | const gradient = ctx.createLinearGradient(x, y, x + fillWidth, y); |
| 427 | gradient.addColorStop(0, color + 'AA'); |
| 428 | gradient.addColorStop(1, color); |
| 429 | ctx.fillStyle = gradient; |
| 430 | ctx.fillRect(x, y, fillWidth, height); |
| 431 | |
| 432 | // 标签 |
| 433 | ctx.font = this.fonts.small; |
| 434 | ctx.fillStyle = this.colors.textMuted; |
| 435 | ctx.fillText(label, x, y - 5); |
| 436 | } |
| 437 | |
| 438 | drawStats(width, height) { |
| 439 | const ctx = this.ctx; |