原因分析：

浏览器window中的devicePixelRatio属性决定了浏览器会用几个像素点来渲染一个像素，假设devicePixelRatio=2，在retina屏下，会用2个像素点的宽度去渲染canvas的1个像素点，因此该canvas在retina屏幕上实际占据的宽高放大了一倍，因此图片会变得模糊。

解决：我们可以放大canvas的坐标系，然后缩小其显示的宽高

var getPixelRatio = function(context) {	var backingStore = context.backingStorePixelRatio ||		context.webkitBackingStorePixelRatio ||    	context.mozBackingStorePixelRatio ||    	context.msBackingStorePixelRatio ||    	context.oBackingStorePixelRatio ||    	context.backingStorePixelRatio || 1;	return (window.devicePixelRatio || 1) / backingStore;};var canvas = document.createElement('canvas');var context = canvas.getContext('2d');var scaleBy = getPixelRatio(context);var w = 500;var h = 500;canvas.width = w * scaleBy;canvas.height = h * scaleBy;canvas.style.width = w + 'px';canvas.style.height = h + 'px';context.scale(scaleBy, scaleBy);html2canvas(document.getElementById("posterImg"), {    canvas:canvas,    onrendered: function(canvas) {        var dataUrl = canvas.toDataURL();        var newImg = document.createElement("img");        newImg.src =  dataUrl;        newImg.width=w;        newImg.height=h;        $("body")[0].appendChild(newImg);    }});