transform: scale(0.2);
在真机下不起作用,在图片和微信小程序码合成应用中,需要实现在页面上显示320*640导出尺寸720*1280,测试发现导出是根据画布大小决定的,canvas如果按实际导出尺寸设置就会超过屏幕体验非常不好。
尝试决绝方法1:
js里设置ctx.scale(0.2, 0.2)
结果只是吧画布里的内容缩放了图片导出还是画布大小,而且因为缩小了内容导致画布很大地方空白。
尝试方法2:
设置实际导出大小*2,但是这样图片会模糊
wx.canvasToTempFilePath({
width: w,
height: h,
destWidth: w * 2,
destHeight: h * 2,
canvasId: 'canvas_course',
success: (res) => {
this.data.canvas = res.tempFilePath
wx.hideLoading()
}
})
尝试方法3:
设置画布的transform: scale属性,在开发工具上测试是可以达到预期效果,但是在真机上scale不起作用
canvas {
width: 720px;
height: 1280px;
transform: scale(0.2);
transform-origin: left top;
}
微信小程序开发问题解答
微信小程序开发者回答:
canvas是原生组件,
无法对原生组件设置 CSS 动画
https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
本文网址:http://www.91bianli.com/weixinxiaochengxu/42353.html