当你使用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; } }