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.getContex

本文介绍如何利用canvas技术绘制彩票和股票的走势图。首先,确定要绘图的表格;接着,获取表格尺寸并创建相应大小的canvas,定位覆盖在表格上。然后,存储绘制点的坐标信息,并开始绘制曲线;最后,展示绘制完成的效果,包括彩票和股票的走势图。
最低0.47元/天 解锁文章
1533

被折叠的 条评论
为什么被折叠?



