Я новичок в 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]]
Рисунок выглядит хорошо, но я не знаю, как добавить "контекст""число как текст в элементе canvas.Я видел этот пример:
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>
но как получить элемент контекста холста и добавить текст?