52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
|
export function renderLine(ctx, from) {
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.lineWidth = 1;
|
||
|
|
ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
|
||
|
|
const length = 35;
|
||
|
|
ctx.moveTo(from, 293);
|
||
|
|
ctx.lineTo(from + length, 293);
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
export function renderText(ctx, text, size, color, x, y) {
|
||
|
|
ctx.setFontSize(size);
|
||
|
|
ctx.setFillStyle(color);
|
||
|
|
ctx.fillText(text, x, y);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function renderRankTitle(ctx, text) {
|
||
|
|
const fontSize = 10;
|
||
|
|
const textWidth = ctx.measureText(text).width;
|
||
|
|
const padding = 8; // 文字与背景边缘的间距
|
||
|
|
const radius = 10; // 圆角半径
|
||
|
|
const textX = 75;
|
||
|
|
const textY = 55;
|
||
|
|
const x = textX - padding; // 文字 x 坐标减去内边距
|
||
|
|
const y = textY - fontSize - padding / 2 + 1; // 文字 y 坐标减去字体大小和内边距
|
||
|
|
const width = textWidth + padding * 2 - 15; // 背景宽度
|
||
|
|
const height = fontSize + padding + 1; // 背景高度
|
||
|
|
|
||
|
|
// 开始绘制圆角矩形
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(x + radius, y);
|
||
|
|
// 上边框
|
||
|
|
ctx.lineTo(x + width - radius, y);
|
||
|
|
ctx.arcTo(x + width, y, x + width, y + radius, radius);
|
||
|
|
// 右边框
|
||
|
|
ctx.lineTo(x + width, y + height - radius);
|
||
|
|
ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
|
||
|
|
// 下边框
|
||
|
|
ctx.lineTo(x + radius, y + height);
|
||
|
|
ctx.arcTo(x, y + height, x, y + height - radius, radius);
|
||
|
|
// 左边框
|
||
|
|
ctx.lineTo(x, y + radius);
|
||
|
|
ctx.arcTo(x, y, x + radius, y, radius);
|
||
|
|
|
||
|
|
// 设置背景颜色并填充
|
||
|
|
ctx.fillStyle = "#5F51FF";
|
||
|
|
ctx.fill();
|
||
|
|
ctx.setFontSize(fontSize);
|
||
|
|
ctx.setFillStyle("rgba(255, 255, 255, 0.9)");
|
||
|
|
ctx.fillText(text, textX, textY); // 绘制文字
|
||
|
|
}
|