直接将vnode渲染成canvas

原文链接: github.com

Vue based on virtual dom to render canvas

example

/* index.css */
image {
  left: 10px;
  width: 100px;
  height: 100px;
}
.title {
  left: 120px;
  width: 100px;
  height: 100px;
  fill: "#000";
  font-size: 18px;
}
.desc {
  left: 120px;
  fill: '#999'
}
.date {
  left: 120px;
  fill: '#999'
}
import './index.css'

new Vue({
  data: {
    dataJSON: [
      {
        title: '标题',
        desc: '描述',
        img: 'https://avatars3.githubusercontent.com/u/21073039?s=460&v=4'
      },
      {
        title: '标题',
        desc: '描述',
        img: 'https://avatars3.githubusercontent.com/u/21073039?s=460&v=4'
      }
    ]
  }

  renderCanvas(h) {
    return h('view', this.dataJSON.map((item, i) => {
      return h('view', [
        h('image', {
          props: {
            src: item.img
          },
          style: {
            top: 10 + 110 * i
          }
        }),
        h('text', {
          class: 'title',
          style: {
            top: 10 + 120 * i
          }
        }, item.title),
        h('text', {
          class: 'desc',
          style: {
            top: 50 + 120 * i
          }
        }, item.desc),
        h('text', {
          class: 'date',
          style: {
            top: 80 + 110 * i,
          }
        }, new Date().toLocaleDateString())
      ])

    }))
  }
}

image