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寬的線條。
如何解決這個問題，就是把線條中線和和像素中間點對齊就行了。

中間點位置很好找，向后移動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();

原來具體詳細解釋：請看這里

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的解决canvas画图模糊的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。