解决canvas画图模糊的问题

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

1. 改变canvas渲染的像素

状况：画1像素的线条看起来模糊不清，好像更宽的样子。

解决方案

var ctx = canvas.getContext('2d');
ctx.translate(0.5, 0.5);

原理：你们都知道屏幕最小单位就是像素。假如把canvas放的足够大，我能看到下面样子。

每个方格就是长和宽都为1px。当咱们画1px线条时遵循像素的起止范围，咱们能获得标准的细线。

但遗憾的是canvas的画法不同。canvas的每条线都有一条无限细的“中线”，线条的宽度是从中线向两侧延伸的。若是咱们仍是从第2个像素点画一条线，那么线条的中线就会靠齐到第2个像素的起点，而后咱们开始画了，问题也就来了：Canvas 的线条以中线向两侧延伸，而不是向某一边延伸(好比这里，若是只是往右侧延伸，那么咱们的问题就再也不是问题了)，延伸事后咱们的线条其实是这样的：

可是计算机不容许出现<1px的图形。因此会作个折中，把两个像素都绘制了。如此一来，原本1px的线条，就成了看起来2px宽的线条。
如何解决这个问题，就是把线条中线和和像素中间点对齐就好了。

中间点位置很好找，向后移动0.5px。因此大家画线时能够这样：

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的属性，该属性决定了浏览器会用几个（一般是2个）像素点来渲染1个像素，举例来讲，假设某个屏幕的devicePixelRatio的值为2，一张100x100像素大小的图片，在此屏幕下，会用2个像素点的宽度去渲染图片的1个像素点，所以该图片在此屏幕上实际会占据200x200像素的空间，至关于图片被放大了一倍，所以图片会变得模糊。
**其实方案很简单，也很容易明白。咱们能够建立一个两倍于实际大小的canvas，而后用css样式把canvas限定在实际的大小。
下面是实现具体代码例子：

var canvas = document.getElementById("canvas")
        context= canvas.getContext("2d");  
    var devicePixelRatio = window.devicePixelRatio || 1;
    var backingStoreRatio = context.webkitBackingStorePixelRatio ||
                        context.mozBackingStorePixelRatio ||
                        context.msBackingStorePixelRatio ||
                        context.oBackingStorePixelRatio ||
                        context.backingStorePixelRatio || 1;
    var ratio = devicePixelRatio / backingStoreRatio;
    canvas.width = canvas.width * ratio;
    canvas.width = canvas.height* ratio;
    context.scale(ratio, ratio);
    ctx.translate(0.5, 0.5);
    ctx.lineWidth = 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();

原来具体详细解释：请看这里

关注

欢迎关注小站小滑轮，小站都是平时工做中积累的一些小工具。是否是大家工做中也会遇到呢。关于小站的内容也能够在博客下面留言哦。有什么使用的工具想让我补充，也能够留言。