怎麼在高清屏上畫一條0 5px的邊

怎麼在高清屏上畫一條0.5px的邊呢？0.5px相當於高清屏物理畫素的1px。這樣的目的是在高清屏上看起來會更細一點，效果會更好一點，例如更細的分隔線。

理論上px的最小單位是1，但是會有幾個特例，高清屏的顯示就是乙個特例。高清屏確實可以畫0.5px，對比效果如下：

在pc上的不同瀏覽器上測試測試結果如下所示：

其中chrome把0.5px四捨五入變成了1px，而firefox/safari能夠畫出半個畫素的邊，

進一步在手機上觀察ios的chrome會畫出0.5px的邊，而安卓(5.0)原生瀏覽器是不行的。所以直接設定0.5px不同瀏覽器的差異比較大，並且我們看到不同系統的不同瀏覽器對小數點的px有不同的處理。所以如果我們把單位設定成小數的px包括寬高等，其實不太可靠，因為不同瀏覽器表現不一樣。

<

style
>
.hr.scale-half 
style
>
<
p>1px + scaley(0.5)
p>
<
div 
class
="hr scale-half"
>
div>

我們發現chrome/safari都變虛了，只有firefox比較完美看起來是實的而且還很細，效果和直接設定0.5px一樣。所以通過transform: scale會導致chrome變虛了，而粗細幾乎沒有變化，所以這個效果不好。

<

style
>
.hr.gradient 
style
>
<
p>linear-gradient(0deg, #fff, #000)
p>
<
div 
class
="hr gradient"
>
div>

linear-gradient(0deg, #fff, #000)的意思是：漸變的角度從下往上，從白色#fff漸變到黑色#000，而且是線性的，在高清屏上，1px的邏輯畫素代表的物理（裝置）畫素有2px，由於是線性漸變，所以第1個px只能是#fff，而剩下的那個畫素只能是#000，這樣就達到了畫一半的目的。

我們發現這種方法在各個流覽器上面都不完美，效果都是虛的，和完美的0.5px還是有差距。這個效果和scale 0.5的差不多，都是通過虛化線，讓人覺得變細了。

<

style
>
.hr.boxshadow 
style
>
<
p>box-shadow: 0 0.5px 0 #000
p>
<
div 
class
="hr boxshadow"
>
div>

這個方法在chrome和firefox都非常完美，但是safari不支援小於1px的boxshadow，所以完全沒顯示出來了。不過至少找到了一種方法能夠讓pc的chrome顯示0.5px。

<

style
>
.hr.svg 
style
>
<
p>svg
p>
<
div 
class
="hr svg"
>
div>

<

svg 
xmlns
='' 
width
='100%' 
height
='1px'
>
<
line 
x1='0' 
y1='0' 
x2='100%' 
y2='0' 
stroke
='#000'
>
line
>
svg>

.hr.svg

其實0.5px的需求在移動端應該會更常見，比較一下以上五種方法在ios和安卓的表現，如下圖所示：

ios下的safari和chrome表現一致，都是以直接設定0.5px的效果最好，而安卓瀏覽器則是以box-shadow的效果最好（試了5和7），而svg的方案在ios和安卓的裝置上都能完美支援。

WPF動態在畫布（Canvas）上畫乙個矩形。

應用背景，現在有乙個用wpf定義好的畫布，現在要在這個畫布畫乙個矩形，當然矩形是根據畫布大小決定的。需要引用的檔案 using system.windows using system.windows.controls using system.windows.media using system.w...

在ARM開發板的螢幕上畫乙個圓，並使圓動起來

本人使用的是三星6818 開發板 arm cortex a53架構 linux系統。螢幕的大小是800 480。即有800 480個畫素點。只要把屬於球那部分的畫素點與背景的畫素點用不同的顏色區分開來就能顯示出乙個圓了。既然是要在螢幕上畫圓，那首先就要開啟螢幕的螢幕裝置檔案 dev fb0。下一步就...

如何在網頁上畫乙個三角形

首先我們來看看如何繪製乙個正方形，畫正方形其實很簡單 我們只需要畫乙個盒子的四個邊框，寬和高設定設定為0px就可以 一起看看源 一起來看卡效果吧 這樣我們就繪製了乙個看起來由四個三角形組成的正方形 接下來我們只需要將其他三個三角形的顏色設定成和背景顏色一樣即可 來看看效果吧 這個做法有乙個弊端，就是...