使用HBuilder X 开发小程序，大多数的画布插件很多都是vue2的写法，vue3的很少

我自己也试了很多个插件，但是有一些还是有问题，不好用

海报画板 - DCloud 插件市场  先将插件导入项目中

自己项目亲自用过，功能基本是完善的，大家可以在链接去看示例

大概样式写一下，大家也可以按照我的格式粘贴

动态数据就循环放在一个view 中给他塞进去就可以了 

如果大家想不显示图片，生成画布之后会返回一个地址图片，显示这个图片加一个hidden 就可以了

<l-painter ref="painter" @done="getthumb" hidden />let painter = ref(null);
// 画布初始数据let poster = ref({css: {// 根节点若无尺寸，自动获取父级节点width: '750rpx',height: '1200rpx',backgroundImage: `url(https://mpapi.sstlab.cn/images/bg_orbital.png)`},views: [{css: {height: '100rpx',width: '100%',display: 'flex',justifyContent: 'center',alignItems: 'center',paddingTop: '80rpx',boxSizing: 'border-box',marginBottom: '80rpx'},views: [{src: 'https://mpapi.sstlab.cn/images/time_conversio.png',type: 'image',css: {objectFit: 'cover',objectPosition: '50% 50%',width: '40rpx',height: '40rpx'}},{text: '时间转换',type: 'text',css: {verticalAlign: 'middle',paddingLeft: '10rpx',color: '#64c4ff'}}],type: 'view'},{css: {height: '820rpx'},views: [],type: 'view'}],type: 'view'
});

//画布成功后转化为图片
const getthumb = () => {wx.hideLoading();painter.value.canvasToTempFilePathSync({fileType: 'jpg',// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为urlpathType: 'url',quality: 1,success: (res) => {wx.previewImage({urls: [res.tempFilePath]});}});
};