Categories: Artikel HTML

Menggambar Teks Pada Canvas

Untuk menggambar teks pada CANVAS, ada satu properti dan dua metode yang harus digunakan. Mereka itu font, fillText(text,x,y), dan strokeText(text,x,y).

Ilustrasi 1:

Ilustrasi 2:

font
Properti font tetapkan properti-properti FONT untuk teks, nilai defaultnya ’10px sans-serif’.

Contoh instruksi berikut menggambar teks dengan FONT-STYLE-nya ‘italic’, FONT-SIZE-nya ’30 piksel’ dan FONT-FAMILY-nya ‘arial’:

Kode untuk output di atas:

<canvas id=’myCanvas’ height=’60’>Browser anda tidak mendukung CANVAS!</canvas> <script> var oCanvas = document.getElementById("myCanvas"); var oContext = oCanvas.getContext("2d"); oContext.font = "italic 30px arial"; oContext.fillText("Hello World",10,50); </script>

fillText()
Metode fillText() dipakai untuk menggambar teks pada CANVAS, tetapi dengan warna penuh. Untuk tampilannya anda dapat lihat pada Ilustrasi 1.

Contoh:

<canvas id=’myCanvas’ height=’60’>Browser anda tidak mendukung CANVAS!</canvas> <script> var oCanvas = document.getElementById("myCanvas"); var oContext = oCanvas.getContext("2d"); oContext.font = "30px arial"; oContext.fillText("Hello World",10,50); </script>

strokeText()
Jika ingin menggambar teks dengan tidak warna penuh dapat gunakan metode strokeText() dan metode ini memiliki cara kebalikannya metode fillText() dalam tampilannya. Untuk tampilannya anda dapat lihat pada Ilustrasi 2.

Contoh:

<canvas id=’myCanvas’ height=’60’>Browser anda tidak mendukung CANVAS!</canvas> <script> var oCanvas = document.getElementById("myCanvas"); var oContext = oCanvas.getContext("2d"); oContext.font = "30px arial"; oContext.strokeText("Hello World",10,50); </script>

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Ahmad Code