Vue组件迁移至HTML Canvas后Boids模拟异常排查求助

我正在开发一款**群体集群（Flocking）**的Boids模拟系统。最初使用Vue组件而非Canvas渲染Boids，近期遇到行为异常问题，遂迁移至Canvas以优化调试可视化。迁移时保持Boids数据与前端分离，核心代码基本未变，但Canvas版本出现以下异常：

• Boids缩放不当
• 画质模糊
• Boids易越界

已检查坐标但未找到问题根源，相关代码模块说明：

• Boid.ts：实现聚集（cohesion）、分离（separation）、对齐（alignment）等核心规则
• Boid.vue：旧版本渲染箭头SVG的组件
• Swarm.vue：旧版本循环渲染Boid组件的集群组件
• SwarmV2.vue：新版本用requestAnimationFrame绘制的Canvas组件

内容的提问来源于stack exchange，提问作者Jelles