主頁 > 知識庫 > html5 Canvas畫圖教程(3)—canvas出現(xiàn)1像素線條模糊不清的原因

html5 Canvas畫圖教程(3)—canvas出現(xiàn)1像素線條模糊不清的原因

熱門標簽:平頂山電子地圖標注怎么修改 會聲會影怎樣做地圖標注效果 洛陽市伊川縣地圖標注中心官網(wǎng) 高德地圖標注錯誤怎么修改 江蘇高頻外呼系統(tǒng)線路 搜狗星級酒店地圖標注 標準智能外呼系統(tǒng) 電銷機器人視頻 地圖標注自己去過的地方
接上一篇canvas畫線條教程
上次我們講到,canvas有時候會出現(xiàn)1像素的線條模糊不清且好像更寬的情況,如下圖:
 
這樣的線條顯然不是我們想要的。
這篇文章的目的就是弄清楚里面的原理,以及解決它。
大家都知道屏幕上最小的顯示尺寸就是1像素,雖然小于1像素的東西可能顯示不出來,但計算機可不管,他會試著畫一下。
其實像素終究來說也是一個單位,假如我們把畫布放大到足夠大,足以看清楚每個像素,會是什么情況呢?大概是這個樣子:


每個像素都有起止范圍,如圖所示,他們的范圍從左起,跨過1像素,到右止。
如果我們畫1像素線條的時候,遵循像素的起止范圍,那么我們肯定能得到一個很標準的細線。如下:


但遺憾的是canvas的線條畫法不一樣,上一篇文章我們已經(jīng)說了,canvas的每條線都有一條無限細的“中線”,線條的寬度是從中線向兩側(cè)延伸的。如果我們還是從第2個像素點畫一條線,那么線條的中線就會靠齊到第2個像素的起點,然后我們開始畫了,問題也就來了:Canvas 的線條以中線向兩側(cè)延伸,而不是向某一邊延伸(比如這里,如果只是往右側(cè)延伸,那么我們的問題就不再是問題了),延伸過后我們的線條實際上是這樣的:


此時又有個問題:計算機不允許出現(xiàn)小于1px的圖形,所以他做了一個折中的事:把這兩個像素都繪制了。
所以,如此一來,本來1px的線條,就成了看起來2px寬的線條。
失敗的原因找到了:Canvas中的line把中線與像素的起點對齊了,而不是像素的中間點。
那么我們怎么解決這個蛋疼的問題?也許有人已經(jīng)想到了:既然是因為兩個的起點不一樣,那我們就把他們的起點變得一樣吧!
我們讓線條的中線和像素的中間點對齊就行了!
像素的中間點很好找,比如第2像素的中間點,依據(jù)圖上的解釋就是1.5像素的位置,那么x像素的中間點就是(x-0.5)px。

 
當然,在不很嚴謹?shù)膱龊希闶褂脁+0.5也是可以的。
現(xiàn)在我們在canvas上試試我們的研究結(jié)果。

復(fù)制代碼
代碼如下:

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.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
ctx.stroke();


看起來對了吧?
不過貌似這樣一來我們畫線的時候就非常糾結(jié),難道每次都去加這個讓人郁悶的0.5?當然不是,因為我們大部分時間都是用變量保存值的,就不用給每個值加0.5 了
而且,對于lineWidth>1 的線,我們也不用管它:因為只有線條寬1px的時候,這個問題才最明顯。

標簽:廣西 果洛 廣東 蚌埠 鄂爾多斯 常德 松原 阿克蘇

巨人網(wǎng)絡(luò)通訊聲明:本文標題《html5 Canvas畫圖教程(3)—canvas出現(xiàn)1像素線條模糊不清的原因》,本文關(guān)鍵詞  html5,Canvas,畫圖,教程,canvas,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《html5 Canvas畫圖教程(3)—canvas出現(xiàn)1像素線條模糊不清的原因》相關(guān)的同類信息!
  • 本頁收集關(guān)于html5 Canvas畫圖教程(3)—canvas出現(xiàn)1像素線條模糊不清的原因的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章