前段时间,做一个跨平台app项目,需要绘制分时图和K线图。找了很多开源的js的图表库,包括echarts、highcharts等等,都不是很满意,原因有2:
1、太臃肿,我实际上只要一个分时和一个K线图表,最多搭配几个线形图
2、不满足需求。主要就是分时图,国内玩的js图表库,几乎都没有分时图。都是用1分钟线的收盘价线来做的,和中国股民的使用习惯完全不搭界。
多年前有人开源了一个js绘制股票图形的库,叫做html54stock,图像表现上很符合中国人的使用习惯,但是也有问题:
1、封装不好,很多代码还在html里写的,没有做好封装
2、绘制的图像经常有模糊出现,即线条有毛边
看了一下html54stock的源码,又梳理了一遍自己的需求,终于决定自己写一个简易的库。
绘制本身不难,主要要处理的就是封装和线条模糊的问题。封装就不多说了,以后有机会我也开源出来。这边文章主要讲的就是如何解决模糊问题。
网上有很多文章解释为什么会模糊,都写得很好,大家可以参考下面的博文:
http://www.cnblogs.com/lixlib/archive/2012/11/27/2790243.html
我主要做点补充:
1、绘制线条时,采用线条中点定位的方式,所以造成模糊,刚才引用的博文也说得很清楚,只需要坐标偏移到0.5,那么1px宽度的线条就不会出现模糊,
比如画一个矩形边框,那么正确的做法就是x和y各偏移0.5,高和宽各缩小1即可,比如,我们要绘制一个20*30的矩形,就应该使用ctx.strokeRect(0.5,0.5,20,30)
2、填充矩形,这个和绘制线条又不一样了,给定的坐标就真的是填充的边界,比如刚才举的例子,ctx.fillRect(0.5,0.5,20,30),如果这样调用,肯定是会模糊的
所以这个时候就应该改成ctx.fillRect(0,0,20,30)
canvas绘制模糊的问题,网上有很多大牛已经发过很多文章了,但是提到fillRect的并不多,希望我分享的能帮到大家。
原文:http://www.cnblogs.com/silencesword/p/5971537.html