用HTML5繪製圖形在手機上消除模糊顯示

我一直在開發的是iOS客戶端，並且一直在關心k線的開發和優化，總想試驗用前端的一些方式繪製一些圖形出來，翻了翻書籍，瞭解到用Canvas開發的時候，因為螢幕的特性，繪製的圖形和字可能都是模糊的，那是和手機螢幕的特性有關，那麼需要用到的一個特性是裝置畫素比，正好是現如今在開發iOS中的那個比例，獲取方式是window.devicePixelRatio。
以下內容源自https://www.cnblogs.com/ashuige/archive/2012/11/29/2794587.html
為了防止原有部落格被刪除掉，參考如下，本人只在iOS上進行了試驗，沒有在Android上進行試驗。

比如有個canvas

var pixelTatio = getDevicePixelRatio(),
width = 300,
height =300;
canvas.style.width = width + "px";
canvas.style.height = height +"px";
canvas.width = width * pixelTatio;
canvas.height = height * pixelTatio;

在畫圖的時候

var ctx  = canvas.getContext("2d");
ctx.fillStyle = "black"
ctx.fillRect(0 * pixelTatio, 0 * pixelTatio, 300 * pixelTatio, 300 *pixelTatio);

原理很簡單，拉伸了2倍，畫圖按照2倍去畫，這樣就抵消了。