简介
基于 HTML 和 CSS 实现 Canvas 绘图。
项目地址
代码片段：https://developers.weixin.qq.com/s/9zFHKdmh7De2
原理
构建虚拟DOM 树，依据 CSS 规范计算样式，使用 CSS 盒模型对 DOM 进行布局，计算出所有元素的位置。最后将 DOM 树通过 Canvas Api 进行绘制。
小程序开发工具内运行 demo
git clone https://github.com/alexayan/html-canvas.git
npm i
npm run watch
已支持的 CSS 属性
margin，margin-left，margin-top，margin-right，margin-bottom，padding，padding-left，padding-top，padding-right，padding-bottom，width，height，border，border-left，border-top，border-right，border-bottom，border-width，border-style，border-color，border-left-style，border-left-color，border-left-width，border-top-style，border-top-color，border-top-width，border-right-style，border-right-color，border-right-width，border-bottom-style，border-bottom-color，border-bottom-width，color，display，background-color，border-radius，border-top-left-radius，border-top-right-radius，border-bottom-left-radius，border-bottom-right-radius，box-sizing，font，font-style，font-variant，font-weight，font-stretch，font-size，line-height，font-family，text-align，position，overflow，overflow-x，overflow-y，top，left，right，bottom，z-index
demo
在pc开发工具上显示正常，在ios真机上border-radius 圆角属性不管用， 基础库是2.14.0。在安卓机上样式错乱（小米10）每次渲染生成图片的时候都有一部分样式不生效或者错位（例如某个文本的字体大小不正确，或者字体颜色不正确，图片位置向右偏移等），有比较小的概率出现全部样式渲染正确的情况。
红米note7样式错乱，一般怎么解决呢
x: 0,
y: 0,
width: tree.boxWidth().value(),
height: tree.boxHeight().value(),
canvasId: 'canvas',
success(res) {
console.log('图片已生成', res.tempFilePath);
}
})
请问苹果手机上有问题吗
我特别好奇，小程序没有dom实例，怎么把页面转成模板？？？
根据代码片段，试了下，现在我需要请求数据后再生成图片，比如 把 0 改成 5，这里得html是写死的。需要怎么动态生成呢？
补充一下：其中border-radius 圆角属性，在基础库2.7.1及以上才可以使用。
用您提供的方式 做了一个直播海报，好用，谢谢！
在pc开发工具上显示正常，就是到了手机上渲染样式错乱
attached: function() {const items = this.cache.get(CHOICE_POSTER_ITEMS)let Content = this.mixedData(items)const ctx = wx.createCanvasContext('canvas');const tree = Node.fromHtml(Content);tree.setStyle('width', `${systemInfo.screenWidth}px`)tree.layout(ctx).then(() => {this.setData({canvasStyle: `width: ${systemInfo.screenWidth}px; height: ${tree.boxHeight().value()}px;`}, () => {const canvas = new Canvas(ctx);canvas.draw(tree)ctx.draw(false, () => {setTimeout(() => {wx.canvasToTempFilePath({x: 0,y: 0,width: tree.boxWidth().value(),height: tree.boxHeight().value(),canvasId: 'canvas',success: (res) => {util.console('图片已生成', res.tempFilePath);this.saveTempImage(res.tempFilePath)}})}, 2000)})})});},过来学习，先谢谢了
建议做个代码片段，大家能直接看到效果https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
x: 0,
y: 0,
width: tree.boxWidth().value(),
height: tree.boxHeight().value(),
canvasId: 'canvas',
success(res) {
console.log('图片已生成', res.tempFilePath);
}
})