将canvas大小设为(1200*800),使用css将canvas缩放到适应屏幕大小。
这在开发工具的模拟器中是没有问题的,然而在真机测试的时候是无效的,不管用的是transform还是zoom。
本质上就是生成一个更大的图片,因为手机的屏幕设备的像素比现在一般都是超过2的。实际上我们只需要在使用wx.canvasToTempFilePath的时候,设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可。
context.draw(true, setTimeout(function() {
//将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 670,
height: 959,
destWidth: 2010,
destHeight: 2877,
canvasId: 'mycanvas',
success: function(res) {
var tempFilePath = res.tempFilePath;
that.setData({
imagePath: tempFilePath,
canvasHidden: true
});
},
fail: function(res) {
console.log(res);
}
});
}, 200));