微信小程序canvas问题笔记(1) 微信小程序canvas画布空白

怎么合成图片？canvas可以弄一个图片模板，然后覆盖一个图片上去吗？

可以的

怎么显示一个图片？

const image = canvas.createImage()

image.src = '../../app/public/static/erweima.jpg'

image.onload = () => {

context.drawImage(

image,

0,

0,

150,

100,

)

}

image.src 可以是临时路径吗？路径有什么要求？

路径是基于page的相对位置

在其他文件用，也是page

微信小程序静态图片放在哪里？

哪里都可以的，page的页面下用的话，路径是相对page的路径

生成的海报分辨率大小是多少？

760 * 1105

canvas 怎么弄几个文字？

ctx.font = "20px sans-serif"

ctx.fillText("天若有情", 10, 20);

ctx.strokeText("天若有情", 10, 40)

canvas 的文字怎么改变颜色？

ctx.fillstyle = "FFFFFF"

海报上的内容 是代码弄 还是搞个图片模板呢

都可以

怎么生成图片？canvas生成的图片的像素跟什么有关系？canvas怎么转换成临时文件？

// 生成图片

wx.canvasToTempFilePath({

canvas,

success: res => {

// 生成的图片临时文件路径

this.setData({

tempFilePath: res.tempFilePath

})

},

})

生成的图片怎么下载？

有临时路径后

let FileSystemManager = wx.getFileSystemManager()

FileSystemManager.saveFile({

tempFilePath : res.tempFilePath,

success : res => {

console.log("保存成功")

console.log(res)

}

})

canvas 一开始是没有背景颜色的吗？canvas 怎么设置背景颜色？

ctx.fillStyle = "#FFFFFF";

ctx.fillRect(0, 0, 380, 552); // 容器大小

wx.getWindowInfo is not a function

需要基础库在 2.20以上

生成的图片的分辨率大小跟canvas的关系？canvas.width 的单位是什么？

单位应该是像素

canvas怎么画图呢？

canvas的文字坐标起点？

第一个文字的左下角

canvas的图片坐标起点？

是图片的左上角

const dpr = wx.getWindowInfo().pixelRatio 是什么意思？

Step 2: 设置宽高调整图片

获取 Canvas 绘图上下文后，将 Canvas 的宽高设置为节点宽高 * 设备像素比，绘制出来的图片更清晰

// 获取设备像素比

const dpr = wx.getSystemInfoSync().pixelRatio

// 将 canvas 宽高设置为

canvas.width = res[0].width * dpr

canvas.height = res[0].height * dpr

canvas可以按照比例缩小吗？canvas的宽高是固定的？那

canvas的容器的高宽 跟 canvas画布的高宽不是一个

里面的元素的坐标是以容器的坐标为准的

怎么绘制一个矩形在底部？

根据figma的定位，不考虑兼容，直接画个矩形

微信小程序canvas真机调试白屏？Cannot read property 'createView' of undefined ？ Cannot read property 'getContext' of null

TypeError: Cannot read property 'getContext' of null？

微信的真机显示与线上环境不同，微信的真机测试不可以使用 canvas，但不影响线上使用， 可以尝试上线或体验版测试。

为什么文字会奇怪的缩放？

因为代码里面没有 ctx.scale(dpr, dpr)