html制作北京地铁线路图
时间: 2023-07-03 20:04:10 浏览: 82
制作北京地铁线路图可以使用HTML和CSS来实现。以下是一个简单的例子:
首先,创建一个HTML文件,并在文件中添加一个canvas元素,用于绘制地铁线路图:
```html
<!DOCTYPE html>
<html>
<head>
<title>北京地铁线路图</title>
<style>
canvas {
width: 800px;
height: 600px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
```
然后,在JavaScript中编写绘制地铁线路图的代码。可以使用HTML5 Canvas API来绘制线条、圆形、文本等元素。
例如,以下代码可以绘制北京地铁2号线的线路图:
```javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制线条
ctx.beginPath();
ctx.moveTo(50, 300);
ctx.lineTo(150, 300);
ctx.lineTo(200, 250);
ctx.lineTo(300, 250);
ctx.lineTo(350, 200);
ctx.lineTo(450, 200);
ctx.lineTo(500, 150);
ctx.lineTo(550, 150);
ctx.lineTo(600, 100);
ctx.lineTo(650, 100);
ctx.lineTo(700, 50);
ctx.stroke();
// 绘制圆形
ctx.beginPath();
ctx.arc(50, 300, 5, 0, 2 * Math.PI);
ctx.fill();
// 绘制文本
ctx.font = "14px Arial";
ctx.fillText("北京地铁2号线", 50, 320);
```
通过类似的方式,可以绘制其他地铁线路的线路图。同时可以使用CSS样式来设置线条颜色、宽度、圆形大小等样式。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)