使用canvas实现腾讯自选股K线图

最新推荐文章于 2024-04-26 16:02:19 发布

蚂蚁二娘

最新推荐文章于 2024-04-26 16:02:19 发布

阅读量1.7k

点赞数

文章标签： javascript 前端 react.js 性能优化

本文链接：https://blog.csdn.net/web2022050901/article/details/129104046

版权

本文介绍了如何使用HTML5 canvas绘制腾讯自选股的K线图，包括K线的构成和画法，详细讲解了绘制过程，如绘制网格、处理数据、绘制K线实体、影线、均线和成交量。通过解决画布模糊问题，确保了图形的清晰度。

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

前言

平常为了方便看行情就会打开小程序看走势，作为一个开发在看腾讯自选股的日K时就会在想这个玩意是怎么弄的呢？下面我就用h5来实现一个最简K线图。

K线的构成以及画法

K线又称阴阳线、棒线、红黑线或蜡烛线。
K线是一条柱状的线条，由实体和影线两部分构成。影线在实体上方的部分叫上影线，下方的部分叫下影线。实体分阳线和阴线。其中影线表明当天交易的最高和最低价，而实体表明当天的开盘价和收盘价。如果收盘价高于开盘价，K线就用红色或者空心显示，称为阳线；反之，收盘价低于开盘价，K线用绿色或实心显示，称为阴线。

了解K线的构成对我们进行绘制有很大的帮助。

效果对比

左边的是我们实现的，右边的是腾讯自选股的。

绘制过程

绘制网格
获取数据、处理数据
绘制K线实体、影线
绘制MA5、10、20日均线
绘制成交量

绘制网格

canvas的宽高由父级定义然后进行动态设置。这样做的好处是外层宽高变了，canvas自动适应。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style> .dayLine {width: 353px;height: 293px;margin: 30px auto;} </style>
<body><div class="dayLine"><canvas id="canvas"></canvas></div><script src="./tools/dayLine.js"></script><script> const parent = document.getElementsByClassName('dayLine')[0];new dayLine({canvas: document.getElementById('canvas'),height: parent.clientHeight,width: parent.clientWidth}) </script>
</body>
</html>