vue如何掛載canvas

但我把mounted改成created的時(shí)候會(huì)報(bào)Cannot read property 'appendChild' of null"

這是因?yàn)閏reated的時(shí)候，Dom節(jié)點(diǎn)還沒有渲染出來(lái)到頁(yè)面上，這個(gè)時(shí)候是找不到id=wave的DIV的。

改成Vue的插件

import wavePng from './wave.png'
export default {
    install(Vue){
        Vue.directive('wave', {
            inserted: function(el){
                start(el)
            }
        })
    }
}
    var ctx;
    var waveImage;
    var canvasWidth;
    var canvasHeight;
    var needAnimate = false;

    function init (callback, wave) {
        // var wave = document.getElementById('wave');
        var canvas = document.createElement('canvas');
        if (!canvas.getContext) return;
        ctx = canvas.getContext('2d');
        canvasWidth = wave.offsetWidth;
        canvasHeight = wave.offsetHeight;
        canvas.setAttribute('width', canvasWidth);
        canvas.setAttribute('height', canvasHeight);
        wave.appendChild(canvas);
        waveImage = new Image();
        waveImage.onload = function () {
            console.log('000')
            waveImage.onload = null;
            callback(wave);
        }
        waveImage.src = wavePng;
    }

    function animate () {
        var waveX = 0;
        var waveY = 0;
        var waveX_min = -203;
        var waveY_max = canvasHeight * 0.7;
        var requestAnimationFrame = 
            window.requestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.msRequestAnimationFrame ||
            function (callback) { window.setTimeout(callback, 1000 / 60); };
        function loop () {
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
            if (!needAnimate) return;
            if (waveY < waveY_max) waveY += 1.5;
            if (waveX < waveX_min) waveX = 0; else waveX -= 3;
            
            ctx.globalCompositeOperation = 'source-over';
            ctx.beginPath();
            ctx.arc(canvasWidth/2, canvasHeight/2, canvasHeight/2, 0, Math.PI*2, true);
            ctx.closePath();
            ctx.fill();

            ctx.globalCompositeOperation = 'source-in';
            ctx.drawImage(waveImage, waveX, canvasHeight - waveY);
            
            requestAnimationFrame(loop);
        }
        loop();
    }

    function start (el) {
        console.log(1)
        if (!ctx) return init(start, el);
        needAnimate = true;
        setTimeout(function () {
            if (needAnimate) animate();
        }, 500);
    }
    function stop () {
        needAnimate = false;
    }

上述的代碼，把原先插件的閉包去掉了，因?yàn)檫@個(gè)改成vue的插件webpack打包完本身就是一個(gè)閉包了。
然后使用的話，就用指令的形式

<template>
  <div id="wave" class="wave" v-wave><span>60%</span></div>
</template>

<script>
import wave from './a'
export default {

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wave{width:200px;height:200px;overflow:hidden;border-radius:50%;background:rgba(255,203,103,.6);margin:100px auto;position:relative;text-align:center;display:table-cell;vertical-align:middle;}
.wave span{display:inline-block;color:#fff;font-size:20px;position:relative;z-index:2;}
.wave canvas{position:absolute;left:0;top:0;z-index:1;}
</style>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import wave from './components/a'

Vue.config.productionTip = false
Vue.use(wave)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

這樣就可以了。