function pxRa(cxt) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
此方法是获取设备与canvas一个适合的比例，具体也不知道怎么表达，剧烈来说，设计稿是640，放在iphone 5、6 ，这个值就是2， 电脑满屏就是1， 6plus 3 等等；
根据这个值去对canvas 进行 方法，缩大放小。
这是img的 图，
下面这是 canvas 画出来的图
是不是看上去很清晰，跟原图没有什么区别区别
代码 合图 如下：
var w = $(".container").width();
var h = $(".container").height();
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var ra=getPixelRatio(context);
console.log(ra);
canvas.width = w * ra;
canvas.height = h * ra;
<!-- canvas.style.width = w + "px"; -->
<!-- canvas.style.height = h + "px"; -->
//然后将画布缩放，将图像放大两倍画到画布上
context.scale(2, 2);
html2canvas(obj).then(function(canvas) {
var copyStr = canvas.toDataURL("image/png", 0.92);
$(‘.complex-img‘).attr(‘src‘, copyStr);
<!-- document.body.appendChild(img); -->
});