首页 > 其他 > 详细

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

时间:2016-10-17 23:14:01      阅读:341      评论:0      收藏:0      [点我收藏+]

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

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

原文:http://www.cnblogs.com/silencesword/p/5971537.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!