html5 Canvas畫圖教程(3)—canvas出現(xiàn)1像素線條模糊不清的原因_HTML5教程
推薦:html5指南-3.如何實(shí)現(xiàn)html元素拖拽功能本文的內(nèi)容是關(guān)于在html5中如何實(shí)現(xiàn)html元素拖拽功能。在html5之前要實(shí)現(xiàn)拖拽,需要借助js,現(xiàn)在html5內(nèi)部就支持了拖拽的功能,但是要實(shí)現(xiàn)稍微復(fù)雜的功能還是少不了js的幫忙
接上一篇canvas畫線條教程上次我們講到,canvas有時(shí)候會(huì)出現(xiàn)1像素的線條模糊不清且好像更寬的情況,如下圖:
這樣的線條顯然不是我們想要的。
這篇文章的目的就是弄清楚里面的原理,以及解決它。
大家都知道屏幕上最小的顯示尺寸就是1像素,雖然小于1像素的東西可能顯示不出來,但計(jì)算機(jī)可不管,他會(huì)試著畫一下。
其實(shí)像素終究來說也是一個(gè)單位,假如我們把畫布放大到足夠大,足以看清楚每個(gè)像素,會(huì)是什么情況呢?大概是這個(gè)樣子:
每個(gè)像素都有起止范圍,如圖所示,他們的范圍從左起,跨過1像素,到右止。
如果我們畫1像素線條的時(shí)候,遵循像素的起止范圍,那么我們肯定能得到一個(gè)很標(biāo)準(zhǔn)的細(xì)線。如下:
但遺憾的是canvas的線條畫法不一樣,上一篇文章我們已經(jīng)說了,canvas的每條線都有一條無限細(xì)的“中線”,線條的寬度是從中線向兩側(cè)延伸的。如果我們還是從第2個(gè)像素點(diǎn)畫一條線,那么線條的中線就會(huì)靠齊到第2個(gè)像素的起點(diǎn),然后我們開始畫了,問題也就來了:Canvas 的線條以中線向兩側(cè)延伸,而不是向某一邊延伸(比如這里,如果只是往右側(cè)延伸,那么我們的問題就不再是問題了),延伸過后我們的線條實(shí)際上是這樣的:
此時(shí)又有個(gè)問題:計(jì)算機(jī)不允許出現(xiàn)小于1px的圖形,所以他做了一個(gè)折中的事:把這兩個(gè)像素都繪制了。
所以,如此一來,本來1px的線條,就成了看起來2px寬的線條。
失敗的原因找到了:Canvas中的line把中線與像素的起點(diǎn)對齊了,而不是像素的中間點(diǎn)。
那么我們怎么解決這個(gè)蛋疼的問題?也許有人已經(jīng)想到了:既然是因?yàn)閮蓚(gè)的起點(diǎn)不一樣,那我們就把他們的起點(diǎn)變得一樣吧!
我們讓線條的中線和像素的中間點(diǎn)對齊就行了!
像素的中間點(diǎn)很好找,比如第2像素的中間點(diǎn),依據(jù)圖上的解釋就是1.5像素的位置,那么x像素的中間點(diǎn)就是(x-0.5)px。
當(dāng)然,在不很嚴(yán)謹(jǐn)?shù)膱龊希闶褂脁+0.5也是可以的。
現(xiàn)在我們在canvas上試試我們的研究結(jié)果。
復(fù)制代碼 代碼如下:m.dounai2.com
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();
看起來對了吧?
不過貌似這樣一來我們畫線的時(shí)候就非常糾結(jié),難道每次都去加這個(gè)讓人郁悶的0.5?當(dāng)然不是,因?yàn)槲覀兇蟛糠謺r(shí)間都是用變量保存值的,就不用給每個(gè)值加0.5 了
而且,對于lineWidth>1 的線,我們也不用管它:因?yàn)橹挥芯條寬1px的時(shí)候,這個(gè)問題才最明顯。
分享:html5 Canvas畫圖教程(4)—未閉合的路徑及漸變色的填充方法一般繪圖的方式有兩種,即填充和描邊,前面的文章已經(jīng)講了描邊的方法stroke,本文就講一下Canvas中填充圖形的方法
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對各個(gè)標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5 Canvas畫圖教程(6)—canvas里畫曲線之a(chǎn)rcTo方法
- html5 Canvas畫圖教程(7)—canvas里畫曲線之quadraticCurveTo方法
- html5 Canvas畫圖教程(5)—canvas里畫曲線之a(chǎn)rc方法
- HTML5之SVG 2D入門2—圖形繪制(基本形狀)介紹及使用
- html5播放視頻且動(dòng)態(tài)截圖實(shí)現(xiàn)步驟與代碼(支持safari其他未測試)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 實(shí)現(xiàn)一個(gè)訪問本地文件的實(shí)例
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5教程之html 5 本地?cái)?shù)據(jù)庫(Web Sql Database)
- HTML5 新舊語法標(biāo)記對我們有什么好處
- 相關(guān)鏈接:
復(fù)制本頁鏈接| 搜索html5 Canvas畫圖教程(3)—canvas出現(xiàn)1像素線條模糊不清的原因
- 教程說明:
HTML5教程-html5 Canvas畫圖教程(3)—canvas出現(xiàn)1像素線條模糊不清的原因。