摘要：畫圖經(jīng)常發(fā)現(xiàn)他是模糊的。解決這個(gè)問題主要從兩個(gè)方面下手。改變渲染的像素情況畫像素的線條看起來模糊不清，好像更寬的樣子。當(dāng)我們畫線條時(shí)遵循像素的起止范圍，我們能得到標(biāo)準(zhǔn)的細(xì)線。但遺憾的是的畫法不一樣。

canvas 畫圖經(jīng)常發(fā)現(xiàn)他是模糊的。解決這個(gè)問題主要從兩個(gè)方面下手。

改變canvas渲染的像素
情況：畫1像素的線條看起來模糊不清，好像更寬的樣子。

解決方案

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

原理：大家都知道屏幕最小單位就是像素。假如把canvas放的足夠大，我能看到下面樣子。

每一個(gè)方格就是長和寬都為1px。當(dāng)我們畫1px線條時(shí)遵循像素的起止范圍，我們能得到標(biāo)準(zhǔn)的細(xì)線。

但遺憾的是canvas的畫法不一樣。canvas的每條線都有一條無限細(xì)的“中線”，線條的寬度是從中線向兩側(cè)延伸的。如果我們還是從第2個(gè)像素點(diǎn)畫一條線，那么線條的中線就會(huì)靠齊到第2個(gè)像素的起點(diǎn)，然后我們開始畫了，問題也就來了：Canvas 的線條以中線向兩側(cè)延伸，而不是向某一邊延伸(比如這里，如果只是往右側(cè)延伸，那么我們的問題就不再是問題了)，延伸過后我們的線條實(shí)際上是這樣的：

但是計(jì)算機(jī)不允許出現(xiàn)<1px的圖形。所以會(huì)做個(gè)折中，把兩個(gè)像素都繪制了。如此一來，本來1px的線條，就成了看起來2px寬的線條。
如何解決這個(gè)問題，就是把線條中線和和像素中間點(diǎn)對(duì)齊就行了。

中間點(diǎn)位置很好找，向后移動(dòng)0.5px。所以你們畫線時(shí)可以這樣：

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.設(shè)置顯示比例
在瀏覽器的window變量中有一個(gè)devicePixelRatio的屬性，該屬性決定了瀏覽器會(huì)用幾個(gè)（通常是2個(gè)）像素點(diǎn)來渲染1個(gè)像素，舉例來說，假設(shè)某個(gè)屏幕的devicePixelRatio的值為2，一張100x100像素大小的圖片，在此屏幕下，會(huì)用2個(gè)像素點(diǎn)的寬度去渲染圖片的1個(gè)像素點(diǎn)，因此該圖片在此屏幕上實(shí)際會(huì)占據(jù)200x200像素的空間，相當(dāng)于圖片被放大了一倍，因此圖片會(huì)變得模糊。
**其實(shí)方案很簡單，也很容易明白。我們可以創(chuàng)建一個(gè)兩倍于實(shí)際大小的canvas，然后用css樣式把canvas限定在實(shí)際的大小。
下面是實(shí)現(xiàn)具體代碼例子：

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();

原來具體詳細(xì)解釋：請(qǐng)看這里