Last active
September 19, 2023 15:20
-
-
Save pukpr/ce4440571e26573835f32d48b26fbc33 to your computer and use it in GitHub Desktop.
AMO redefinition
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title> Morphing Text Animation </title> | |
| <style> | |
| canvas { | |
| border: 1 px solid black; | |
| } </style> | |
| </head> | |
| <body> | |
| <h1> Morphing Text Animation </h1> | |
| <canvas id = "myCanvas" | |
| width = "800" | |
| height = "600" > </canvas> | |
| <script> | |
| const canvas = document.getElementById("myCanvas"); | |
| const ctx = canvas.getContext("2d"); | |
| let titles = [ | |
| "Atlantic Multidecadal Oscillation", | |
| "Atlantic ultidecadal Oscillation", | |
| "Atlantic ltidecadal Oscillation", | |
| "Atlantic tidecadal Oscillation", | |
| "Atlantic tidcadal Oscillation", | |
| "Atlantic tidadal Oscillation", | |
| "Atlantic tiddal Oscillation", | |
| "Atlantic Tidal Oscillation" | |
| ]; | |
| let index = 0; | |
| function drawText(text) { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| ctx.font = "50px Arial"; | |
| const textWidth = ctx.measureText(text).width; | |
| const x = (canvas.width - textWidth) / 2; | |
| const y = canvas.height / 2; | |
| ctx.fillText(text, x, y); | |
| } | |
| setInterval(() => { | |
| drawText(titles[index]); | |
| index = (index + 1) % titles.length; | |
| }, 1000); | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment