Question

我是Vue.js的新手，我非常喜欢它，但是每次学习都会有些沮丧。

这就是我想要做的。

这是我的 index.html ：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-if="message.length != 0" id="drawing">
                <span>Block</span>
                <div v-for="(col, colIdx) in drawData">
                    <canvas v-for="(desc, descIdx) in col" :width="desc" height="19" :key="colIdx.toString() + descIdx" :id="colIdx.toString() + descIdx">
                    </canvas>

                </div>
            </div>
        </div>
        <script src="index.js"></script>
    </body>
</html>

这是 index.js ：

var app = new Vue({
    el: '#app',
    data: {
      seen: true,
      drawData: [],
      message: ""
    },
    methods:{

    },
    //Lifecicle Hooks
    created(){
        console.log(`HOOK CREATED!`);
        fetch("/api_v1/pd").then((r)=>{
            return r.json();
        }).then(data=>{
            console.log(data);
            app.drawData = data;
        })
        setTimeout(()=>{
            console.log(`Set message`);
            app.message = "2 seconds expired!"
        }, 200)
    }
  })

使用上面的代码，我可以显示仅包含数字的二维数组drawData-例如这样的

[[0,21,42,35], [4,2,8], [9,9,11,77]]

绘图看起来不错，但是我不知道如何在画布元素中添加“上下文”数字作为文本。我看到了这个例子：

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>

但是如何获取上下文画布元素并添加文本？

用v-fro填充每个画布Vue.js中的文本

0 个答案: