54 Code di atas jika dijalankan akan menghasilkan sebuah animasi tulisan yg bergerak. Langkah awal untuk membuat animasi ini adalah menyediakan sebuah canvas dimana code ini menggunakan sebuah canvas dengan id="canvas" width=500 height=400. Selain itu kita juga gunakan css code <style>#canvas{border:3px solid black;}</style> untuk memberikan warna hitam dengan ketebalan 3pixel untuk pinggiran canvas di bagian. Setelah memilik canvas, kita masuk kepada bagian javasrcip. Pada awal bagian javascrip kita tentukan terlebih dahulu tulisan apa yang akan dijadikan animasi dengan menambahkan code const textToDisplay = "Wellcome"; dimana disini kita akan membuat animasi untuk tulisan Wellcome. Kemudian tentukan warna background dari canvas dan warna dari tulisan yang akan ditampilkan dengan menambahkan const textStyle = "red"; dan const BGStyle = "white";. Selanjutnya setting kecepatan tulisan ketika muncul pada canvas dengan dengan menggunakan const textSpeed = 0.15; dan tambah jarak mulai text diluar canvas dengan menggunakan const textHorMargin = 8;. Kemudian kita mulai gunakan fungsi var canvas = document.getElementById ("canvas"); dan var ctx = canvas.getContext("2d"); untuk menentukan id canvas mana yang akan digunakan. Setelah itu tentukan ukuran font dan jenis tulisan yang digunakan pada text wellcome dengan cara menggunakan ctx.font=Math.floor(canvas.height * 0.5)+ "px arial";. Jangan lupa
RkJQdWJsaXNoZXIy MTM3NDc5MQ==