55 tentukaan ukuran width dari text yang akan ditampilkan dengan menggunakan code var textWidth=ctx.measureText(textToDisplay).width; dan var totalTextSize=(canvas.width + textHorMargin * 2 + textWidth);. Atur text yang akan ditampilkan berada di posisi pinggir dengan menambahkan code ctx.textBaseline = "middle"; dan ctx.textAlign = "left";. Tulisan yang akan diberi animasi ini akan bergerak dari kanan ke kiri dengan menambahkan var textX = canvas.width + 6; dan tentukan pergerakan text yang terjadi dengan menyediakan var textOffset = 0; . Gunakan var startTime; untuk menyimpan waktu pergerakan dari text Wellcome. Kemudian buat fungsi untuk menjalankan frame animasi dengan membuat function update(time){…} dan didalam fungsi ini kita mulai dulu dengan menentukan waktu awal dari gerakan text if(startTime == undefined){ startTime = time;}. Gunakan style background yang sudah disediakan dan bersihkan layer canvas dengan mengguankan code ctx.fillStyle = BGStyle; dan ctx.fillRect(0, 0, canvas.width, canvas.height);. Selanjutnya gerakkan tulisan kea rah kiri dari kanan canvas dengan code textOffset = (time-startTime)*textSpeed)% (totalTextSize); dan tambahkan style dari text yang sudah disediakan ctx.fillStyle = textStyle;. Terakhir kita mulai melakukan render dengan menambahkan code ctx.fillText(textToDisplay,textX-textOffset,canvas.height/2).
RkJQdWJsaXNoZXIy MTM3NDc5MQ==