canvas绘图,html5 k线图,股票行情图

canvas绘图,html5 k线图,股票行情图

canvas跟其他标签一样,也可以通过css来定义样式。但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canvas定义宽高,实际上把宽高为300px * 150px的画布进行了拉伸,如果在这样的情况下进行canvas绘图,你得到的图形可能就是变形的效果。
所以,在canvas绘图时,应该在canvas标签里直接定义宽高。
Canvas的宽高×2 然后css的宽高是canvas的二分之一
===============
canvas绘制的图好模糊,怎么解决呢? - 简书
https://www.jianshu.com/p/4c4312dc7fc5
这种只是设置文本清晰度的,对K线图没什么用处
===============
k line painter
http://html54stock.outofmemory.cn/k-painter.v1.htm
这个是组件作者的demo 看起来也是差不多模糊的,在移动端手机上看到就更模糊,没有对手机分辨率dpi进行处理
Html5版本的全套股票行情图开源了,附带实现技术简介 - 玉开 - 博客园
https://www.cnblogs.com/yukaizhao/archive/2012/03/13/html-stock-charts.html

==============
ECharts Demo
http://www.echartsjs.com/examples/#chart-type-candlestick

ECharts Demo
http://echarts.baidu.com/examples/editor.html?c=candlestick-touch
用这个清晰的,针对移动端的k线图

免费股票图表、行情和交易观点 — TradingView
https://cn.tradingview.com/
https://cn.tradingview.com/chart/?symbol=BITFINEX%3ABTCUSD&interval=D
交易所的web端k线图很多用TradingView的

posted @   大自然的流风  阅读(4964)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
历史上的今天:
2017-12-15 java实现 HTTP/HTTPS请求绕过证书检测代码实现
点击右上角即可分享
微信分享提示