canvas 画图经常发现他是模糊的。解决这个问题主要从两个方面下手。
改变canvas渲染的像素
情况:画1像素的线条看起来模糊不清,好像更宽的样子。
解决方案
var ctx = canvas.getContext('2d');
ctx.translate(0.5, 0.5);
原理:大家都知道屏幕最小单位就是像素。假如把canvas放的足够大,我能看到下面样子。
每一个方格就是长和宽都为1px。当我们画1px线条时遵循像素的起止范围,我们能得到标准的细线。
但遗憾的是canvas的画法不一样。canvas的每条线都有一条无限细的“中线”,线条的宽度是从中线向两侧延伸的。如果我们还是从第2个像素点画一条线,那么线条的中线就会靠齐到第2个像素的起点,然后我们开始画了,问题也就来了:Canvas 的线条以中线向两侧延伸,而不是向某一边延伸(比如这里,如果只是往右侧延伸,那么我们的问题就不再是问题了),延伸过后我们的线条实际上是这样的:
但是计算机不允许出现<1px的图形。所以会做个折中,把两个像素都绘制了。如此一来,本来1px的线条,就成了看起来2px宽的线条。
如何解决这个问题,就是把线条中线和和像素中间点对齐就行了。