评论

html-canvas 生成小程序分享图

2020-01-06
11667浏览
11评论

基于 HTML 和 CSS 实现 Canvas 绘图

简介

基于 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

canvas-draw.html

最后一次编辑于  2020-01-08  
点赞 5
收藏
评论

11 个评论

  • 胃里养了只霸王龙
    胃里养了只霸王龙
    2020-01-07

    建议做个代码片段，大家能直接看到效果https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-01-07
    赞同
    回复 4
    • yan
      yan
      2020-01-08
      谢谢提醒
      2020-01-08
      赞
      回复
    • 胃里养了只霸王龙
      胃里养了只霸王龙
      2020-01-08回复yan
      实践过了，跟wxml-to-canvas类似。挺好用的，对复杂类型的布局很有帮助
      2020-01-08
      赞
      回复
    • ？？
      ？？
      2020-07-17
      我发现如何使跟紧代码片段中在onReady中导出canvas为图片的时候就会出现样式错乱，而且每次样式错乱都不一样，不知道什么原因，我去掉了，样式就没问题，这段代码 wx.canvasToTempFilePath({
                  x: 0,
                  y: 0,
                  width: tree.boxWidth().value(),
                  height: tree.boxHeight().value(),
                  canvasId: 'canvas',
                  success(res) {
                    console.log('图片已生成', res.tempFilePath);
                  }
                })
      2020-07-17
      赞
      回复
    • 胃里养了只霸王龙
      胃里养了只霸王龙
      2020-07-17回复？？
      onReady导出？？
      2020-07-17
      赞
      回复

正在加载...

请 登录 后发表内容
作者介绍

文章标签
分享图canvas