使用canvs绘画彩票或股票走势图

1、先确定需要绘制图走势图的table

2、获取table的尺寸，同时制作相应的canvs尺寸，canvs表格尺寸建议和表格尺寸相同，并通过定位覆盖在table之上，统称“设置画布”

        let table = $('.chartsTable')    // 通过jquery获取表格对象// 设置画布let cvs = document.createElement('canvas')cvs.style.position = 'absolute'cvs.style.left = 0 + 'px'cvs.style.top = 0 + 'px'cvs.width = table[0].scrollWidth    // 获取表格的宽并用来确定画布的宽度cvs.height = table.height()         // 表格的高度等同画布高度

3、事先通过例如jquery选择器的方式，获取到需要绘制走势图的点的定位，将他们存储于数组之中,建议构造为以下格式

[{left: 10, top: 20},{left: 30, top: 40}...
]

4、用画笔开始绘制走势图

        let cxt = cvs.getContext('2d')    // 画笔cxt.strokeStyle = color           // 颜色cxt.moveTo(canList[0].left, canList[0].top)        // 起点位置 canList为上面步骤3中生成的数组for (let i = 1; i < canList.length; i++) {         // 循环上面的数组，绘制绘画的点位cxt.lineTo(canList[i].left, canList[i].top)}cxt.stroke()$('#chartsTable').append(cvs)                      // 将绘画好的走势图接入表格dom树

5、展示下效果图吧，以下是彩票效果图，股票效果。。嗯。。就是横过来