if (item.dataStatus == 1) {
context.fillStyle = 'red'
} else {
context.fillStyle = '#000' // 字体颜色
}
// context.fillStyle = "#000"; // 字体颜色
context.fillText(words[n], x + this.gapX / 2 - testWidth / 2, currentY);
if (len > 1) {
y += lineHeight;
}
} else {
console.log(words[n], 2);
// 文字超出一行,需要换行展示
// 实际大于页面width font-size: 12, 计算出显示多少行
let singleWordwith = 13;
// 计算一行显示的最大字数,以及显示多少行
let len = Math.floor(maxWidth / singleWordwith);
let lineCount = Math.ceil(words[n].length / len);
for (let j = 0; j <= lineCount; j++) {
// 截取出每行显示的字
let word = words[n].substr(j * len, len);
let wordWidth = context.measureText(word).width;
// 写入画布
// 画背景色遮盖箭头, 背景色自己调,跟画布统一就行
context.fillStyle = "#fff";
context.fillRect(
x + this.gapX / 2 - wordWidth / 2,
y - 4,
wordWidth,
lineHeight
); // 填充黄色背景
let currentY = y;
if (lineCount === 2) {
currentY = y + 2;
} else if (lineCount === 3) {
currentY = y - 6;
} else if (lineCount === 4) {
currentY = y - 18;
} else if (lineCount === 5) {
currentY = y - 28;
} else if (lineCount === 6) {
currentY = y - 38;
} else if (lineCount === 7) {
currentY = y - 48;
}
if (item.dataStatus == 1) {
context.fillStyle = 'red'
} else {
context.fillStyle = '#000' // 字体颜色
}
// context.fillStyle = "#000";
context.fillText(word, x + this.gapX / 2 - wordWidth / 2, currentY);
y += lineHeight; // 换行
}
}
}
},
### 六、模拟后端返回的数据
// signalTimeData: [
// {
// startDataDir: “ATP”,
// endDataDir: “MT”,
// recTime: ‘2023-09-10 09:12:48’,
// showInfo: “M136\r\nT_Train=9340940ms\r\nDT:16”,
// dataDir: 0,
// dataDirStr: “上行”,
// lineType: 0,
// dataStatus: 0
// },
// {
// startDataDir: “MT”,
// endDataDir: “ATP”,
// recTime: ‘2023-09-10 09:12:49’,
// showInfo: “M24\r\nT_Train=9341070ms”,
// dataDir: 1,
// dataDirStr: “下行”,
// lineType: 0,
// dataStatus: 0
// },
// {
// startDataDir: “ATP”,
// endDataDir: “MT”,
// recTime: ‘2023-09-10 09:13:06’,
// showInfo: “M136\r\nT_Train=9358940ms\r\nDT:19\r\n此时,M24之后ATP发送3条APDU”,
// dataDir: 0,
// dataDirStr: “上行”,
// lineType: 0,
// dataStatus: 1
// },
// {
// startDataDir: “MT”,
// endDataDir: “ATP”,
// recTime: ‘2023-09-10 09:13:07’,
// showInfo: “AK:20\r\n此时,M24之后RBC发送3条AK,无APDU”,
// dataDir: 1,
// dataDirStr: “下行”,
// lineType: 0,
// dataStatus: 1
// },
// {
// startDataDir: “ATP”,
// endDataDir: “MT”,
// recTime: ‘2023-09-10 09:13:08’,
// showInfo: “TPDU_DR/SaPDU_D”,
// dataDir: 0,
// dataDirStr: “上行”,
// lineType: 0,
// dataStatus: 1
// },
// {
// startDataDir: “MT”,
// endDataDir: “ATP”,
// recTime: ‘2023-09-10 09:13:09’,
// showInfo: “TPDU_DC”,
// dataDir: 1,
// dataDirStr: “下行”,
// lineType: 0,
// dataStatus: 0
// },
// {
// startDataDir: “ATP”,
// endDataDir: “MT”,
// recTime: “2023-09-10 09:13:09”,
// showInfo: “DISC”,
// dataDir: 0,
// dataDirStr: “上行”,
// lineType: 0,
// dataStatus: 0
// },
// {
// startDataDir: “MT”,
// endDataDir: “ATP”,
// recTime: “2023-09-10 09:13:09”,
// showInfo: “NO CARRIER”,
// dataDir: 1,
// dataDirStr: “下行”,
// lineType: 0,
// dataStatus: 0
// }
// ],
**全部代码如下:**