使用knova canvas 绘制线路的思路整理，下一篇添加代码

主要实现一下效果

绘制上图中的线路方法

1.绘制整条线路需要确定各个点的坐标
1.各个线路端点的坐标又是有整个屏幕的宽高和几个part决定

可以通过window.width|height来获取宽高，这个线路图一共分为八f份，
根据三个数字来确定各个点的坐标
首先将两个坐标分为左边arr和右边arr1，
循环这个part
左边的：x轴坐标是一样的，y轴坐标是递增的
arr.push([1 / this.part * this.width, (i + 1) / this.part * this.height]);`
左边的点坐标的x轴是空了1 / this.part 宽度，y轴递增高度
右边的点坐标同理，x坐标是part-右边的*宽度，y轴递增

arr1.push([(this.part - 1) / this.part * this.width, (i + 1) / this.part * this.height])

最后再将左边的坐标揉进右边的坐标
根据一下规律

循环右边的坐标得到一个规律，左边的坐标是需要插入两个坐标，2二这两个坐标又是连续的：

 var item = arr1[i * 2];
 var itemnext = arr1[i * 2 + 1];

最后再将追加进去，得到所有坐标点

绘制上图中的元素

首先我们需要定一个初始变量oneLineShowNam，就是我们需要一行中展示几个元素，
通过整个的宽度除以这个（初始变量+1）为什么加一是因为前后有空格，计算出来的结果就是两两原属之间的宽度：xstep

然后得到一个多维数组，options.data就是在页面中需要展示的数据，slice是截取，为什么要截取是为了更好的区分行数

  for (let i = 0; i < options.data.length; i += options.oneLineShowNam) {
      _data.push(options.data.slice(i, i + options.oneLineShowNam))//得到元素展示需要几行，得到一个数组中里面包含几个数组，几个就是行数，数组里面就是一行需要展示的元素
    }

最后再通过循环为每个坐标添加图像