### 代码 ``` var canvas2 = document.createElement("canvas"); var _canvas = document.getElementById('app'); var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas).height); //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了 var times = 3; canvas2.width = w * times * window.devicePixelRatio; canvas2.height = h * times * window.devicePixelRatio; canvas2.style.width = w + "px"; canvas2.style.height =h + "px"; var context = canvas2.getContext("2d"); context.scale(times, times); console.log(canvas2.style.width) new html2canvas(document.getElementById('app'), { canvas:canvas2, allowTaint: true, taintTest: true, useCORS: true, background: null, windowWidth:document.body.scrollWidth, windowHeight:document.body.scrollHeight, x:0, y:0 }).then(canvas => { //canvas就是绘制完成的画板对象 }); } }) ``` html2canvas与canvas参考文档 ### 重点介绍 context.scale(x 倍数, y 倍数); //这个是画板放大指定倍数 canvas2.width = w * times * window.devicePixelRatio; //指定画板宽度 canvas2.height = h * times * window.devicePixelRatio; //指定画板宽度 为什么要再乘以window.devicePixelRatio这个其实是设备的dip,canvas设置的宽度是像素 但是页面的单位是px 1px = 1dip 这样就会让页面超出canvas 让截图出现放大 并且显示不完全。 这就是原因,也是卡了两天的bug。