评论

html-canvas 生成小程序分享图

基于 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
收藏
评论

10 个评论

  • 贩卖焦虑
    贩卖焦虑
    2020-01-07

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

    2020-01-07
    赞同 1
    回复 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
      回复
  • 叫我志星就好了
    叫我志星就好了
    2020-11-16

    在pc开发工具上显示正常,在ios真机上border-radius 圆角属性不管用, 基础库是2.14.0。在安卓机上样式错乱(小米10)每次渲染生成图片的时候都有一部分样式不生效或者错位(例如某个文本的字体大小不正确,或者字体颜色不正确,图片位置向右偏移等),有比较小的概率出现全部样式渲染正确的情况。

    2020-11-16
    赞同
    回复 1
    • 叫我志星就好了
      叫我志星就好了
      2020-11-16
      android机渲染问题和延迟一下就可解决了。楼下昵称是Harvey 的那位朋友贴了代码。ios圆角问题尚未解决。
      2020-11-16
      回复
  • ??
    ??
    2020-07-17

    红米note7样式错乱,一般怎么解决呢


    2020-07-17
    赞同
    回复 2
    • yan
      yan
      2020-07-17
      检查下小程序基础库版本。贴一下样式错乱的图。
      2020-07-17
      回复
    • ??
      ??
      2020-07-17回复yan
      我发现如何使跟紧代码片段中在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-15

    请问苹果手机上有问题吗

    2020-07-15
    赞同
    回复
  • 嗷嗷
    嗷嗷
    2020-06-04

    我特别好奇,小程序没有dom实例,怎么把页面转成模板???

    2020-06-04
    赞同
    回复
  • 瑕不掩瑜
    瑕不掩瑜
    2020-05-27

    根据代码片段,试了下,现在我需要请求数据后再生成图片,比如 把 0 改成 5,这里得html是写死的。需要怎么动态生成呢?

    2020-05-27
    赞同
    回复 9
    • yan
      yan
      2020-05-27
      可以使用模板引擎,开源的有很多选择
      2020-05-27
      回复
    • yan
      yan
      2020-05-27
      也可以直接修改解析后的虚拟 dom 树的内容,然后重新布局渲染
      2020-05-27
      回复
    • 瑕不掩瑜
      瑕不掩瑜
      2020-05-28回复yan
      好的,直接修改就太多太麻烦了,模板引擎我看看
      2020-05-28
      回复
    • jzning
      jzning
      2020-06-02回复yan
      推荐个模板引擎
      2020-06-02
      回复
    • yan
      yan
      2020-06-02回复jzning
      lodash 这个 npm 库一般在前后端开发中都会使用到,用 lodash.template 足够处理大部分使用场景
      2020-06-02
      回复
    查看更多(4)
  • 杉杉爱吃鱼🐳
    杉杉爱吃鱼🐳
    2020-04-22

    补充一下:其中border-radius 圆角属性,在基础库2.7.1及以上才可以使用。

    2020-04-22
    赞同
    回复
  • 杉杉爱吃鱼🐳
    杉杉爱吃鱼🐳
    2020-04-22

    用您提供的方式 做了一个直播海报,好用,谢谢!

    2020-04-22
    赞同
    回复
  • Harvey
    Harvey
    2020-03-02

    在pc开发工具上显示正常,就是到了手机上渲染样式错乱

    2020-03-02
    赞同
    回复 5
    • yan
      yan
      2020-03-02
      样式错乱的机型是哪个。(代码片段中的 demo 在 iphone x 真机上是可以正常渲染的)
      2020-03-02
      回复
    • Harvey
      Harvey
      2020-05-08回复yan
      好了,是我这边问题
      2020-05-08
      回复
    • ??
      ??
      2020-07-17回复Harvey
      请问怎么解决的呢,我这边也是样式错乱
      2020-07-17
      回复
    • Harvey
      Harvey
      2020-07-18回复??
      2020-07-18
      1
      回复
    • Harvey
      Harvey
      2020-07-18回复??
      你看下我的代码,我也忘了当时是什么问题导致的了
      2020-07-18
      回复
  • 小肥羊
    小肥羊
    2020-01-08

    过来学习,先谢谢了

    2020-01-08
    赞同
    回复
登录 后发表内容