用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倍去画，这样就抵消了。