- 图片不显示/保存不存在,需要图片绘制完成
const ctx = canvas.getContext("2d");
const image = canvas.createImage();
image.src = "/static/top.png";
image.onload = () => {
// 将图片绘制到 canvas 上
ctx.drawImage(image, 0, 0, width, 200);
};
- 设置文本的Y高度时默认是以文本的底部开始的(默认基线textBaseline=“alphabetic”)
小程序 wxml-to-canvas 组件的注意事项
参考链接
对上面链接的一个补充:
- 每个模块在画布应该使用margin和padding
- 文本需要定义
宽高
,高度足够则会自动换行 - 圆角边框不可以单独定义某一个角
- 不可以写
border: "1 solid red",
,只能分开写如:borderColor: "green"
,只支持实线 - 如果图片有白边可以增加一点宽度或高度
- 微信官方的示例代码是1.0.1这个版本图片可以不是https,并且有的文本可以不写宽高
将包做成组件
// 有一行要改成这个
module.exports = require('../widget-ui/index.js')
// 清空画布 方法下的做如下修改即可不用写死高度(line175)
width: container.layoutBox.width, // 由computedStyle改成layoutBox
height: container.layoutBox.height // 由computedStyle改成layoutBox