canvas 边界模糊_Canvas绘制线条模糊的解决方案

标签：

前段时间，做一个跨平台app项目，需要绘制分时图和K线图。找了很多开源的js的图表库，包括echarts、highcharts等等，都不是很满意，原因有2：

1、太臃肿，我实际上只要一个分时和一个K线图表，最多搭配几个线形图

2、不满足需求。主要就是分时图，国内玩的js图表库，几乎都没有分时图。都是用1分钟线的收盘价线来做的，和中国股民的使用习惯完全不搭界。

多年前有人开源了一个js绘制股票图形的库，叫做html54stock，图像表现上很符合中国人的使用习惯，但是也有问题：

1、封装不好，很多代码还在html里写的，没有做好封装

2、绘制的图像经常有模糊出现，即线条有毛边

看了一下html54stock的源码，又梳理了一遍自己的需求，终于决定自己写一个简易的库。

绘制本身不难，主要要处理的就是封装和线条模糊的问题。封装就不多说了，以后有机会我也开源出来。这边文章主要讲的就是如何解决模糊问题。

网上有很多文章解释为什么会模糊，都写得很好，大家可以参考下面的博文：

我主要做点补充：

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 边界模糊_Canvas绘制线条模糊的解决方案相关推荐

php网页画线,HTML5 canvas基本绘图之绘制线条
是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制线条方法,感兴趣的小伙伴们可以参考一下是HTML5中新增的标签,用于绘制图形,实际上,这个标 ...
html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
canvas 边界模糊_解决canvas画图模糊的问题
canvas 画图经常发现他是模糊的.解决这个问题主要从两个方面下手. 改变canvas渲染的像素情况:画1像素的线条看起来模糊不清,好像更宽的样子. 解决方案 var ctx = canvas.g ...
Canvas - 绘制图片模糊问题（canvas 生成图片模糊）
Canvas绘制模糊文章目录 Canvas绘制模糊零.问题背景与解决思路一.涉及到的Api 1.关于window.devicePixelRatio canvas出现模糊的原因第一块屏幕测试 w ...
canvas 实现图片局部模糊_Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js
Canvas实现毛玻璃效果解决方式1:使用stackblur.js 在Android系统中实现图片的毛玻璃效果比较好用的类库是:Android StackBlur 简单API说明: API 调用下面 ...
canvas画线变粗变模糊的解决办法
自己写的小例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法发布时间:2020-08-29 11:24:23 来源:亿速云阅读:96 作者:小新这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
java canvas 画线_canvas教程(二) 绘制直线
经过而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线但是无论是直线还是曲线,我们都应该先了解 canvas 的坐标系 s canvas 的坐标系要绘制之 ...
canvas 文字颜色_Canvas技术概述
Canvas简介在学习一项新技术之前,先了解这项技术的历史发展及成因会帮助我们更深刻的理解这项技术. 历史上,canvas最早是由Apple Inc. 提出的,在Mac OS X webkit中创建 ...

canvas 边界模糊_Canvas绘制线条模糊的解决方案

canvas 边界模糊_Canvas绘制线条模糊的解决方案相关推荐

最新文章

热门文章