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

scorpio_h

于 2018-05-21 10:43:17 发布

阅读量6k

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas

本文链接：https://blog.youkuaiyun.com/scorpio_h/article/details/80388989

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章

200万优质内容无限畅学