标签：
前段时间，做一个跨平台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
