本文主要是介绍使用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、展示下效果图吧，以下是彩票效果图，股票效果。。嗯。。就是横过来
这篇关于使用canvs绘画彩票或股票走势图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
