知识点:
-
polyline折线标签
-
polygon多边形标签
区别就是一个是非闭合,一个是闭合的。
-
polyline标签
虽然可以直接用line标签首尾相接画出折线,但是这样有一个缺点,就是折线交接处,会有空缺,感觉像拼接的一样,体验很差劲。
而是用polyline标签,会完美衔接,可看下图中的三个折线交接处,对比很明显。
但polyline有几个特点
-
使用points属性控制显示多个点的坐标,每个X值与Y值直接使用空格区分,多个点位之间也是空格区分。空格可以使用逗号(,)来替代。
空格==逗号
-
多个点确定后,默认画出来的是带有黑色填充的,需要使用fill=“none”或者fill="transparent",来置为空心。
<polyline points="90 90 120 190 200 260 290 220 330 260 410 110 510 0" fill="none" stroke="red" stroke-width="2"></polyline>
<polygon points="100,150,130,300,230,100" fill="none" stroke="blue" stroke-width="2"></polygon>
使用折线标签实现百度地图测距的功能。
北斗七星,其实可以画很多图形,因为使用了onmousemove事件、oncontextmenu事件、onmousedown事件,可以做出百度地图中测距的功能。
B 站效果视频
SVG实现百度测距功能
不知道CSDN怎么直接发SVG的运行效果,有懂的大神吗,求告知。