<template>
<div>
<canvas ref="roadCanvas" width="550" height="150"></canvas>
</div>
</template>
<script>
export default {
data () {
return {
road: {
width: 550,
height: 200,
color: "gray"
},
screens: [
{ x: 0, y: 0, width: 100, height: 40, text: "屏幕 1: 文字 1" },
{ x: 150, y: 0, width: 100, height: 40, text: "屏幕 2: 文字 2" },
{ x: 300, y: 0, width: 100, height: 40, text: "屏幕 3: 文字 3" },
{ x: 450, y: 0, width: 100, height: 40, text: "屏幕 4: 文字 4" }
],
textSpeed: 20 // 文字滚动速度
}
},
mounted() {
this.updateScreen();
},
methods: {
updateScreen() {
const canvas = this.$refs.roadCanvas;
const ctx = canvas.getContext("2d");
// 渲染道路
ctx.fillStyle = this.road.color;
ctx.fillRect(0, 10, this.road.width, this.road.height);
// 绘制白色斑马线
ctx.fillStyle = "white";
const lineWidth = 80; // 斑马线宽度
const lineHeight = 10; // 斑马线高度
const gap = 40; // 斑马线间隔
let x = gap;
while (x < canvas.width) {
ctx.fillRect(x, 60, lineWidth, lineHeight);
ctx.fillRect(x, 80, lineWidth, lineHeight);
ctx.fillRect(x, 100, lineWidth, lineHeight);
x += lineWidth + gap * 2;
}
this.screens.forEach(screen => {
ctx.fillStyle = "black";
ctx.fillRect(screen.x, screen.y, screen.width, screen.height);
// 在屏幕上绘制滚动文字
ctx.fillStyle = "white";
ctx.font = "16px Arial";
// 计算滚动位置
const scrollPosition = (Date.now() * this.textSpeed / 1000) % (screen.text.length * 16);
// console.log('123',scrollPosition)
// 计算截断的位置,确保文字不会溢出屏幕
const truncatePosition = Math.min(scrollPosition, screen.width);
// 绘制滚动文字,通过截断位置来实现隐藏溢出部分
ctx.fillText(
screen.text.slice(0, truncatePosition / 10),
screen.x + screen.width - truncatePosition,
screen.y + 30
);
});
requestAnimationFrame(this.updateScreen);
},
}
};
</script>
<style>
/* Add any custom styles here */
</style>