『壹』 html5 canvas在img標簽的圖片上繪制矩形框、矩形框為1px時線條模糊問題
前端需要在後端返回的圖片集合里，根據提供的對角線坐標繪制矩形。矩形可能是多個。效果達到如下：
1、根據後端返回的圖片list，生成canvas畫布，
2、把圖片畫到canvas裡面，再根據後端返回的坐標，在canvas里畫矩形框。
此項目中，後端返回的坐標是基於縮略圖的，但是前端渲染在頁面上的圖片，會按寬為788px來顯示，所以坐標應該要按照比例來算。
真實的左上x點的計算方式為：真實寬 / 壓縮寬 * 壓縮x點
https://blog.csdn.net/qq_29594393/article/details/52849339
https://www.runoob.com/w3cnote/html5-canvas-intro.html
https://www.imooc.com/wenda/detail/551496
https://blog.csdn.net/qq_44907926/article/details/114907056?spm=1001.2014.3001.5501
①畫矩形時，如果裡面的參數有不是整數的話，容易導致邊框粗細不一等問題。
②當矩形的邊框lineWidth設置為1px時候，會出現線條模糊的問題。
關於第②個問題的延申：
這是測試提給我的bug：
我的思路存在的問題：
首先，同樣是矩形的邊框我同樣設置的都是1px，不應該有的線條顏色深，有的顏色淡啊，排除了參數沒有取整的問題後，我懷疑了顏色red在畫布上的渲染問題，換成十六進制的同樣有問題。就在我一籌莫展的時候，我叫來了小夥伴，我說你看這線條顏色是不是不一樣，我開始懷疑我的眼神有問題。小夥伴說，你給線條整粗點看看這問題明顯嗎。我把邊框線條設置了2px，發現和1px的粗細是一樣的，並且顏色一樣了線條不模糊了。換成別的寬度，只要不是1px都沒有問題了。
思維的問題在於，我網路問題的描述有問題，我之前一直搜canvas繪制矩形線條深淺不一，我應該搜canvas矩形線條模糊。我排查問題的時候，固定思維模式覺得1px寫的沒錯，卻沒有嘗試排查。
關於這個問題的詳細解答與解決辦法：
canvas1px線條模糊
我的理解
canvas的線條畫法不一樣，canvas的每條線都有一條無限細的「中線」，線條的寬度是從中線向兩側延伸的，也就是說canvas繪制1px的時候，是中線向左右兩邊延申各取0.5，並不是向某一邊延申（如果只是往右延申就不再是問題了），此時問題出現了，計算機不允許出現小於1px的圖形，所以他做了一個折中的事：把這兩個像素都繪制了。所以，如此一來，本來1px的線條，就成了看起來2px寬的線條。
延申：
HTML 5 Canvas詳細講解 ———— 第二篇（清除canvas畫布上指定區域+橡皮擦功能實現；在畫布上平鋪指定圖片；在畫布上繪制文本；總結案例之刮刮樂功能實現）
『貳』 如何解決移動端Retina屏1px像素的問題
首先我們先聊下Retina屏的概念。
Retina: 一種新型高分前中辨率的顯示標准胡舉,又稱視網膜顯示屏。
在移動端開發中，UI設計稿中設置邊框為1px，前端在開發中如果出現border:1px,測試會發褲悔碧現在Retina屏機型中，1px會比較粗，即是經典的移動端1px像素問題。
比如iphone6的屏幕寬度為375px，設計師的視覺稿一般是750px，如果UI的border 1px,而前端實際開發的時候是不能採用1px border的，應該是1px/2。
參考高級前端進階
『叄』 前端自適應布局怎麼解決1px的問題
不知道你問的是解決什麼1px的問題，如果是解決1px的高度問題， 那就加scaleY。
『肆』 CSS - 移動端 1像素解決辦法
前言：在移動端web開發中，UI設計稿逗敗中設置邊框為1像素，前端在開發過程中如果出現border:1px，測試會發敗睜現在某些機型上，1px會比較粗，即是較經典的 移動端1px像素問題。
要處理這個問題，必須先補充一個知識點，就是設備的 物理像素[設備像素] & 邏輯像素[CSS像素]；
1.物理像素：
移動設備出廠時，不同設備自帶的不同像素，也稱硬體像素；
2.邏輯像素：
即css中記錄的像素。
在開發中，為什麼移動端CSS裡面寫了1px，實際上看起來比1px粗；了解設備物理像素和邏輯像素的同學應該很容易理解，其察指歲實這兩個px的含義其實是不一樣的，UI設計師要求的1px是指設備的物理像素1px，而CSS里記錄的像素是邏輯像素，它們之間存在一個比例關系，通常可以用 javascript 中的 window.devicePixelRatio 來獲取，也可以用媒體查詢的 -webkit-min-device-pixel-ratio 來獲取。當然，比例多少與設備相關。
在手機上border無法達到我們想要的效果。這是因為 devicePixelRatio 特性導致，iPhone的 devicePixelRatio==2，而 border-width: 1px; 描述的是設備獨立像素，所以，border被放大到物理像素2px顯示，在iPhone上就顯得較粗。
● 用::after和::befor,設置border-bottom：1px solid #000,然後在縮放-webkit-transform: scaleY(0.5);可以實現兩根邊線的需求
● 用::after設置border：1px solid #000; width:200%; height:200%,然後再縮放scaleY(0.5); 優點可以實現圓角，京東就是這么實現的，缺點是按鈕添加active比較麻煩。
『伍』 手機前端，我寫的是border：1px；但是在手機上顯示不止1像素。
在<head></head>之間設置下<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
兼容性問題，某個元素默認就有1px的border，或者有1px的outline，將各元素的base屬性border與outline設為0；
<style>
img{border:0px solid #ddd;outline:none;}
</style>
img{}