将你的 Virtual dom 渲染成 Canvas

项目概述

一个基于Vue的virtual dom插件库，按照Vue render 函数的写法，直接将Vue生成的Vnode渲染到canvas中。支持常规的滚动操作和一些基础的元素事件绑定。

github 地址： github

demo实例：demo

背景

从一个小的需求说起：某一天，产品提了一个这样的需求，需要制作一个微信活动页，活动页可以分享包含用户相关信息的图片。这些信息是需要从接口取的，而且每个人都不一样。第一次碰到这种需求的时候，基本上都会去手撸canvasAPI去做渲染功能，这种情况的步骤大致如下：

写一大串 dom template 标签
渲染template成dom标签
开始捕捉dom元素，绘制canvas
canvas 渲染图片

面临的主要问题是复用性太差，其次是性能上也有问题，用户看到的界面不一定和正式渲染出的界面一致，可能存在渲染差异。作为一个有追求的前端，当然得想想看有没有更好的法子。于是乎了解到了一个html2canvas 这样一个库。但是总是感觉还是要转成dom再去绘制，而且感觉性能和稳定性也不是很好。

我们知道vue通过vnode实现了对不同端的渲染工作，那有没有可能通过vnode实现对canvas的渲染呢？也就是说，没有vnode -> html -> canvas 而是直接vnode -> canvas。同时利用vue的数据驱动，来达到绘制的数据驱动。想法有了，下面开始实施。

调研

这篇文章对此有详细的介绍：60 FPS on the mobile web 这里简单的概括一下：

canvas是一种立即模式的渲染方式，不会存储额外的渲染信息。Canvas 受益于立即模式,允许直接发送绘图命令到 GPU。但若用它来构建用户界面，需要进行一个更高层次的抽象。例如一些简单的处理,比如当绘制一个异步加载的资源到一个元素上时会出现问题,如在图片上绘制文本。在HTML中，由于元素存在顺序，以及 CSS 中存在 z-index，因此是很容易实现的。

dom渲染是一种保留模式，保留模式是一种声明性API，用于维护绘制到其中的对象的层次结构。保留模式 API 的优点是，对于你的应用程序，他们通常更容易构建复杂的场景，例如 DOM。通常这都会带来性能成本,需要额外的内存来保存场景和更新场景，这可能会很慢。

看来canvas绘制页面的研究，很久之前就已经有人付出过研究了。而且性能还是很不错的。那我们更要试试看，到底我们的想法能不能实现了！越来越期待....

开始

canvas 的渲染其实也是一种尝试，既然前人以及做了充分的实践，那么我们便站在巨人的肩膀上去基于vue来实现一个数据驱动的canvas渲染。说做就做！(我们这里只提供思路，不做具体实现细节的讨论，因为实现起来有点复杂，如果有兴趣可以参考我的项目实现，或者一起交流探讨 )

处理vnode

熟悉Vue源码的应该都知道，Vue通过render函数，传入createElement方法来构造出一个vnode，通过发布--订阅模式来实现对数据的监听，重新生成vnode。我们要做的就是在vnode这一层开始。所以，我们基于Vue源码的方式，实现一个监听函数，并混入Vue实例中：

Vue.mixin({

    // ...

    created() {

      if (this.$options.renderCanvas) {

        // ...

        // 监听vnode中引用的变化，重新渲染

        this.$watch(this.updateCanvas, this.noop)

        // ...

      }

    },

    methods: {

      updateCanvas() {

        // 模拟Vue render 函数

        // 寻找实例中定义的 renderCanvas 方法，并传入createElement方法

        let vnode = this.$options.renderCanvas.call(this._renderProxy, this.$createElement)

      }

})

这样我们就可以愉快的在组件内部使用：

renderCanvas (h) {

  return h(...)

}

canvas 元素处理

render 的vnode我们需要做额外的一些约束，也就是说我们需要怎么样的渲染标签，来渲染对应的canvas元素（举个