<view class="story">
<canvas hidden="{{radarImg}}" canvas-id="canvas" type="2d" id="canvas" style="width: 100vw; height: calc(100vw / 750 * 1080);"></canvas>
<image hidden="{{!radarImg}}" src="{{radarImg}}" style="width: 100vw; height: calc(100vw / 750 * 1080);" />
</view>
openDialog: () => {
console.log('openDialog()');
let ctx = wx.createCanvasContext('canvas');
// that.setData({
// radarImg: 'tempFilePath',
// show: true
// });
// console.log(that);
ctx.draw(true, setTimeout(()=>{
wx.canvasToTempFilePath({
canvasId: 'canvas',
success: function(res) {
console.log(res);
let tempFilePath = res.tempFilePath;
that.setData({
radarImg: tempFilePath,
show: true
});
},
fail: function(res) {
console.log(res);
}
}, that);
},500))
},
that是在全局里定义的,在onload() 里 赋值 that = this;
drawBg: function({ canvas, ctx, width, height } = {}, url) { return new Promise((resolve, reject) => { wx.downloadFile({ url: url, success: function(res) { console.log(res); ctx.drawImage(res.tempFilePath, 0, 0, width, height); ctx.draw(true); console.log('drawed bg') resolve(); }, fail: function(res) { console.log(res); reject(); } }); }); },
你好,自行参考代码片段:https://developers.weixin.qq.com/s/w4rKXqm67xkz,
canvas2d的示例请参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.html
你的基础库检查一下是不是最新版本库