python画图模糊_解决canvas画图模糊的问题

canvas 画图经常发现他是模糊的。解决这个问题主要从两个方面下手。

改变canvas渲染的像素

情况&＃xff1a;画1像素的线条看起来模糊不清&＃xff0c;好像更宽的样子。

解决方案

var ctx &＃61; canvas.getContext(&＃39;2d&＃39;);

ctx.translate(0.5, 0.5);

原理&＃xff1a;大家都知道屏幕最小单位就是像素。假如把canvas放的足够大&＃xff0c;我能看到下面样子。

每一个方格就是长和宽都为1px。当我们画1px线条时遵循像素的起止范围&＃xff0c;我们能得到标准的细线。

但遗憾的是canvas的画法不一样。canvas的每条线都有一条无限细的“中线”&＃xff0c;线条的宽度是从中线向两侧延伸的。如果我们还是从第2个像素点画一条线&＃xff0c;那么线条的中线就会靠齐到第2个像素的起点&＃xff0c;然后我们开始画了&＃xff0c;问题也就来了&＃xff1a;Canvas 的线条以中线向两侧延伸&＃xff0c;而不是向某一边延伸(比如这里&＃xff0c;如果只是往右侧延伸&＃xff0c;那么我们的问题就不再是问题了)&＃xff0c;延伸过后我们的线条实际上是这样的&＃xff1a;

但是计算机不允许出现<1px的图形。所以会做个折中&＃xff0c;把两个像素都绘制了。如此一来&＃xff0c;本来1px的线条&＃xff0c;就成了看起来2px宽的线条。

如何解决这个问题&＃xff0c;就是把线条中线和和像素中间点对齐就行了。

中间点位置很好找&＃xff0c;向后移动0.5px。所以你们画线时可以这样&＃xff1a;

ctx.moveTo(100.5,100.5);

ctx.lineTo(200.5,100.5);

ctx.lineTo(200.5,200.5);

ctx.lineTo(100.5,200.5);

ctx.lineTo(100.5,100.5);

或者

ctx.translate(0.5, 0.5);

2.设置显示比例

在浏览器的window变量中有一个devicePixelRatio的属性&＃xff0c;该属性决定了浏览器会用几个(通常是2个)像素点来渲染1个像素&＃xff0c;举例来说&＃xff0c;假设某个屏幕的devicePixelRatio的值为2&＃xff0c;一张100x100像素大小的图片&＃xff0c;在此屏幕下&＃xff0c;会用2个像素点的宽度去渲染图片的1个像素点&＃xff0c;因此该图片在此屏幕上实际会占据200x200像素的空间&＃xff0c;相当于图片被放大了一倍&＃xff0c;因此图片会变得模糊。

**其实方案很简单&＃xff0c;也很容易明白。我们可以创建一个两倍于实际大小的canvas&＃xff0c;然后用css样式把canvas限定在实际的大小。

下面是实现具体代码例子&＃xff1a;

var canvas &＃61; document.getElementById("canvas")

context&＃61; canvas.getContext("2d");

var devicePixelRatio &＃61; window.devicePixelRatio || 1;

var backingStoreRatio &＃61; context.webkitBackingStorePixelRatio ||

context.mozBackingStorePixelRatio ||

context.msBackingStorePixelRatio ||

context.oBackingStorePixelRatio ||

context.backingStorePixelRatio || 1;

var ratio &＃61; devicePixelRatio / backingStoreRatio;

canvas.width &＃61; canvas.width * ratio;

canvas.width &＃61; canvas.height* ratio;

context.scale(ratio, ratio);

ctx.translate(0.5, 0.5);

ctx.lineWidth &＃61; 1;

ctx.moveTo(2.5, 2);

ctx.lineTo(98.5, 2);

ctx.lineTo(98.5, 98);

ctx.lineTo(2.5, 98);

ctx.lineTo(2.5, 2);

ctx.stroke();

原来具体详细解释&＃xff1a;请看这里

关注

欢迎关注小站小滑轮&＃xff0c;小站都是平时工作中积累的一些小工具。是不是你们工作中也会遇到呢。关于小站的内容也可以在博客下面留言哦。有什么使用的工具想让我补充&＃xff0c;也可以留言。