Canvas绘制线条模糊的解决方案

Posted 2020-08-15 雁过也

　　前段时间，做一个跨平台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的并不多，希望我分享的能帮到大家。