Question

我正在尝试将this post引入到Vue中，该{{3}}可以绘制简笔画并为其制作动画。

 <?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT sum(amount) AS total FROM foo";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "My Total: " . $row["total"]. "<br>";
    }
} else {
    echo "0 results";
}
$conn->close();
?>

如果我在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); }方法中执行整个draw方法，则它可以工作。但是，当我将draw移至它自己的方法时，如上所述，它失败了。

我知道它失败了，因为运行上面的代码时，行mounted总是返回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>

从Vue制作动画画布

1 个答案: