canvas note

1. 图片不显示/保存不存在，需要图片绘制完成

	    const ctx = canvas.getContext("2d");
	    const image = canvas.createImage();
        image.src = "/static/top.png";
        image.onload = () => {
          // 将图片绘制到 canvas 上
          ctx.drawImage(image, 0, 0, width, 200);
        };
1
2
3
4
5
6
7

2. 设置文本的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
1
2
3
4
5