Cara Membuat Gambar Kotak Menggunakan Vue Js dan Canvas

Pada mengimplementasikan Vue Js dan Canvas yang pertama. Kita akan membuat gambar kotak menggunakan Vue Js dan Canvas

Kita akan mencoba menggambar yaitu sebuah kotak dengan ukuran panjang 50 dan lebar-50 dengan titik koordinat awal x-10, y 10, titik koordinat dimulai dari ujung kiri sebelah atas, dituliskan dengan (10, 10, 50, 50).

Agar tidak bingung, kita langsung saja memimplementasikannya ya

Script pada HTML

<! DOCTYPE html>
<html>
<head>
<title>Implementasi Vue Js dan Canvas</title>
</head>
<body>
<div id-"app">
<canvas v-gambar></canvas>
</div
<script src="vue.min.js"></script>
<script src="apps.js"></script>
</body>
</html>

Lalu script pada file apps.js nya ya

var app = new Vue ({
el : '#app' ,
directives: {
gambar: function (el) {
var c = el.getContext( "2d");
c.fillRect(10, 10, 50, 50)
}
}
)