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

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

解決方案

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

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

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

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

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

中間點(diǎn)位置很好找，向后移動(dòng)0.5px。所以你們畫(huà)線時(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)來(lái)渲染1個(gè)像素，舉例來(lái)說(shuō)，假設(shè)某個(gè)屏幕的devicePixelRatio的值為2，一張100x100像素大小的圖片，在此屏幕下，會(huì)用2個(gè)像素點(diǎn)的寬度去渲染圖片的1個(gè)像素點(diǎn)，因此該圖片在此屏幕上實(shí)際會(huì)占據(jù)200x200像素的空間，相當(dāng)于圖片被放大了一倍，因此圖片會(huì)變得模糊。
**其實(shí)方案很簡(jiǎn)單，也很容易明白。我們可以創(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();

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

超強(qiáng)干貨來(lái)襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。