使用vue.js的通用框架，可为画布绘制启用声明性标记。

特征：

• 子组件的有序渲染
• 所有子组件渲染后回调
• 在vue实例上自动重新渲染已更新

安装和下载：

$ npm install vue-canvas --save

演示示例代码

HTML：

<canvas id="canvas" v-canvas:cb="onRendered" width="600" height="400">
    <v-bg path="img/world.svg" ord="1"></v-bg><!-- sample component -->
    <v-text ord="2" x="300" y="200" :message="message"></v-text><!-- sample component -->
</canvas>

Javascript（用于main）：

var vc = new Vue({
    el: '#canvas',
    data: {
      message: "Hello!"
    },
    methods: {
      onRendered: function (ctx) {
        ctx.textAlign = "start";
        ctx.fillStyle = "red";
        ctx.fillText("rendering done!", 10, 30);
      }
    }
});
// 让我们更新vue实例数据
setTimeout(function () {
    vc.message = "Good-bye!"; // => re-draw canvas automatically!
}, 2000);

Javascript（用于示例组件）：

// 用于绘制画布背景图像的示例组件
Vue.component('v-bg', Vue.extend({
    props: ["ord", "path"],
    methods: {
      draw: function (ctx, done) {
        var img = new Image();
        img.src = this.path;
        img.onload = function(){
          ctx.drawImage(img, 0, 0);
          done();
        }
      }
    }
}));

// 使用提供的坐标绘制消息的示例组件
Vue.component('v-text', Vue.extend({
    props: ["ord", "message", "x", "y"],
    methods: {
      draw: function (ctx, done) {
        var canvas = ctx.canvas;
        ctx.textAlign = "center";
        ctx.fillStyle = "black";
        ctx.font = "bold 30pt Courier";
        ctx.fillText(this.message, parseInt(this.x), parseInt(this.y));
        done();
      }
    }
}));

---

官网：https://github.com/hitokun-s/vue-canvas

演示：https://www.vue365.cn/code_demo.php?id=3620

GitHub下载：https://github.com/hitokun-s/vue-canvas/archive/master.zip