当你使用meta-viewport，canvas在手机上不清晰(模糊)的解决办法。

问题的产生其实适合分辨率有关系。

IPhone4s是retina屏幕，所以以下值应该是2

var getDevicePixelRatio = function (){
        return window.devicePixelRatio || 1;
}

如果是2，我们应当怎么做？

比如有个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倍去画，这样就抵消了。

（对于android的手机，可以试试meta属性target-densitydpi。）

所有有关 数值 都需要*2。每次都要乘以2是不是很烦，我们可以这样做

//当然你也可以写个简单的extend函数去添加方法
if (typeof CanvasRenderingContext2D !== "undefined") {
	var pixelRatio = getDevicePixelRatio();
	CanvasRenderingContext2D.prototype.MyFillRect = function(x,y,w,h){
		x *= pixelRation;
		y *= pixelRation;
		w *= pixelRation;
		h *= pixelRation;
		this.fillRcet(x,y,w,h);
		return this;
	}
}

转载于:https://www.cnblogs.com/ashuige/archive/2012/11/29/2794587.html