Живой холст от Vue

Question

Я пытаюсь реализовать этот пост , который рисует и анимирует фигурку, в Vue.

   draw(timestamp, wave) {
        if(Date.now() < (timestamp+900)) return requestAnimationFrame(this.draw);

        context.clearRect(0, 0, window.innerWidth, window.innerHeight);
        context.beginPath();
        context.fillStyle = "black"; // #000000
        context.arc(200, 50, 30, 0, Math.PI * 2, true);
        context.fill(); //fill the circle  

        context.beginPath(); 
        context.lineWidth = 6;
        context.stroke();

        //body
        context.beginPath();
        context.moveTo(200, 80);
        context.lineTo(200, 180);
        context.strokeStyle = "black";
        context.stroke();

        //arms
        context.beginPath();
        context.strokeStyle = "black";
        context.moveTo(200, 100);
        context.lineTo(150, 130);
        if(wave) { 
        context.moveTo(200, 100);
        context.lineTo(250, 130);
        wave = false;
        }
        else {
        context.moveTo(200, 100);
        context.lineTo(250, 70);
        wave = true;
        }
        context.stroke();

        //legs
        context.beginPath();
        context.strokeStyle = "black";
        context.moveTo(200, 180);
        context.lineTo(150, 280);
        context.moveTo(200, 180);
        context.lineTo(250, 280);
        context.stroke();
        timestamp = Date.now();
        requestAnimationFrame(this.draw);
    }
},
mounted: function () {
    var canvas = document.getElementById("canvas");
    context = canvas.getContext("2d"); // get Canvas Context object
    let timestamp = Date.now();
    let wave = false;

    this.draw(timestamp, wave);
}

Если я выполняю весь метод рисования внутри моего mountedметод, это работает.Но когда я перемещаю рисование к его собственному методу, как показано выше, это терпит неудачу.

Я знаю, что это не удалось, потому что строка if(Date.now() < (timestamp+900)) всегда возвращает false при выполнении кода выше.Но я не уверен, почему это происходит, или в чем разница.

Как мне оживить этот холст?

Answer 1

Вот пример того, как это может выглядеть в компоненте.

Vue.component('canvas-demo', {
    data: function () {
        return {
            timestamp: Date.now(),
            wave: false
        }
    },
    mounted: function(){
        this.startDrawing(this.$el.getContext("2d"));
    },
    template: '<canvas></canvas>',
    methods: {
        startDrawing: function(context) {
            var draw = () => {
                if (Date.now() < (this.timestamp + 900)) return requestAnimationFrame(draw);

                context.clearRect(0, 0, window.innerWidth, window.innerHeight);
                context.beginPath();
                context.fillStyle = "black"; // #000000
                context.arc(200, 50, 30, 0, Math.PI * 2, true);
                context.fill(); //fill the circle  

                context.beginPath();
                context.lineWidth = 6;
                context.stroke();

                //body
                context.beginPath();
                context.moveTo(200, 80);
                context.lineTo(200, 180);
                context.strokeStyle = "black";
                context.stroke();

                //arms
                context.beginPath();
                context.strokeStyle = "black";
                context.moveTo(200, 100);
                context.lineTo(150, 130);
                if (this.wave) {
                    context.moveTo(200, 100);
                    context.lineTo(250, 130);
                    this.wave = false;
                }
                else {
                    context.moveTo(200, 100);
                    context.lineTo(250, 70);
                    this.wave = true;
                }
                context.stroke();

                //legs
                context.beginPath();
                context.strokeStyle = "black";
                context.moveTo(200, 180);
                context.lineTo(150, 280);
                context.moveTo(200, 180);
                context.lineTo(250, 280);
                context.stroke();
                this.timestamp = Date.now();
                requestAnimationFrame(draw);
            }

            draw();
        }
    }
});

new Vue({
    el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <canvas-demo></canvas-demo>
</div>