小程序画布的新接口,很多函数用不了,在真机调试显示空白?
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let _this = this
const query = wx.createSelectorQuery()
query.select('#canvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
// 初始化数据
let canvasWidth = res[0].width;
let canvasHeight = res[0].height;
// 背景
let backgroundImageSrc = "./poster.jpg";
let backgroundImageX = 0;
let backgroundImageY = 0;
let backgroundImageW = canvasWidth;
let backgroundImageH = canvasHeight;
// 头像
let avatarSrc = "./avatar.png";
let avatarX = 15;
let avatarY = 15;
let avatarW = 70;
let avatarH = 70;
// 名字
let nameX = avatarX + avatarW + 10;
let nameY = avatarY;
// 开始绘制背景
const backgroundImage = canvas.createImage()
backgroundImage.src = backgroundImageSrc
backgroundImage.onload = () => {
ctx.drawImage(backgroundImage, backgroundImageX, backgroundImageY, backgroundImageW, backgroundImageH)
ctx.restore()
console.log("绘制背景完成")
const avatar = canvas.createImage()
avatar.src = avatarSrc
avatar.onload = (res) => {
ctx.arc(50, 50, 35, 0, 2 * Math.PI)
ctx.clip()
ctx.drawImage(avatar, avatarX, avatarY, avatarW, avatarH)
ctx.restore()
console.log("绘制头像完成")
}
ctx.setFillStyle("#f49c29")
ctx.setFontSize(50)
// 绘制文字
const metrics = ctx.measureText('Hello World')
console.log(metrics.width)
ctx.strokeText('姓名', nameX, nameY)
ctx.strokeText('科目', 100, 100)
ctx.strokeText('大学', 100, 100)
ctx.strokeText('内容', 100, 100)
ctx.strokeText('长按识别查看动态', 100, 150)
console.log("绘制文字完成")
ctx.draw(true, res => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 1080,
height: 1920,
destWidth: 1080,
destHeight: 1920,
canvasId: "canvas",
success: res => {
console.log(res)
_this.setData({
posterSrc: res.tempFilePath
})
},
fail: res => {
console.log("错误")
}
})
})
}
})
}
})
请大佬们帮忙看看,感谢~~
手机:小米9pro
微信版本:7.0.17