在浏览器上以图形方式显示路径/路由

Question

我试图在浏览器上以图形方式显示路径/路由，供客户查看。例如，基于txt或XML文件，将包括说明。

<route>
  <forward>4</forward>
  <left>90</left>
  <forward>5</forward>
  <left>90</left>
  <forward>2</forward>
</route>

或

F4,L90,F5,L90,F2

对于一个简单的txt文件等效。

在这个例子中，路线是向前移动4个单位，左转90度，再向前移动5个单位，左转90度，并以向前移动2个单位结束。

​

​

就像这样。箭头不一定要在那里，我只是为了清晰的方向画上了它们。如果我能动态地改变图像，就会更好，比如能够显示沿着这条路线行驶的车辆，甚至可能在车辆完成部分路线后，将路线的颜色更改为绿色。

我正在考虑使用Tomcat和javascript一起使用jsp，但是如果有更简单的替代方法，我不会介意的。在我的情况下，有什么工具我可以用吗？我以前没有做过任何接近这件事的事，所以请你帮忙！

Answer 1

1. 了解如何通过.xml - google搜索MVC模式将java文件读入jsp，将数据objet返回jsp页面。
2. 学习如何使用<canvas>：see good reference绘制箭头