javascript
<template>
<div>
<canvas ref="canvas" width="400" height="400"></canvas>
</div>
</template>
<script>
export default {
mounted() {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
// 定义画布大小和单元格大小
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const cellSize = 40;
// 定义机器人的起点和路径
const startX = cellSize / 2;
const startY = cellSize / 2;
const path = ['right', 'down', 'down', 'left', 'up', 'up', 'right', 'right', 'down'];
// 设置起点
let x = startX;
let y = startY;
// 绘制起点
ctx.fillStyle = 'red';
ctx.fillRect(x - 5, y - 5, 10, 10);
// 遍历路径
path.forEach(direction => {
// 根据方向更新坐标
if (direction === 'up') {
if (y - cellSize >= 0) {
y -= cellSize;
}
} else if (direction === 'down') {
if (y + cellSize < canvasHeight) {
y += cellSize;
}
} else if (direction === 'left') {
if (x - cellSize >= 0) {
x -= cellSize;
}
} else if (direction === 'right') {
if (x + cellSize < canvasWidth) {
x += cellSize;
}
}
// 绘制路径
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(x - 5, y - 5);
ctx.lineTo(x + 5, y + 5);
ctx.stroke();
});
}
};
</script>
在上述代码中,我们添加了画布的宽度(canvasWidth
)和高度(canvasHeight
)以及单元格大小(cellSize
)的定义。在更新坐标时,我们对机器人是否超出边界进行了判断,并只有在未超出边界的情况下才更新坐标。这样可以确保机器人不会走出画布范围。请根据实际情况调整画布大小和单元格大小的数值。