Created
December 5, 2022 15:54
-
-
Save artulance/8cd7079d882fc61fb20cac7cfd982396 to your computer and use it in GitHub Desktop.
DVD pause screen
This file contains hidden or 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 lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DVD</title> | |
| <link rel="shortcut icon" href="#"> | |
| <style> | |
| body,html{height: 100vh;} | |
| canvas{border:1px solid black;} | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="dvd-canvas" width="500" height="500"></canvas> | |
| </section> | |
| <script> | |
| function drawDVD(circleSize, speed, direction) { | |
| var canvas = document.getElementById("dvd-canvas"); | |
| var ctx = canvas.getContext("2d"); | |
| // generar posición aleatoria para el círculo | |
| var x = Math.random() * (canvas.width - circleSize); | |
| var y = Math.random() * (canvas.height - circleSize); | |
| // variable para el color del círculo | |
| var color = "#fff"; | |
| renderCircle(ctx,circleSize,x,y,color); | |
| renderText(ctx,x, y); | |
| // mover el círculo en línea recta rebotando contra los límites del canvas | |
| setInterval(function() { | |
| // calcular la nueva posición del círculo | |
| x += speed * direction.x; | |
| y += speed * direction.y; | |
| // comprobar si el círculo ha rebotado contra los límites del canvas | |
| if (x + circleSize > canvas.width || x < 0) { | |
| direction.x *= -1; | |
| color = "#" + Math.floor(Math.random()*16777215).toString(16); | |
| } | |
| if (y + circleSize > canvas.height || y < 0) { | |
| direction.y *= -1; | |
| color = "#" + Math.floor(Math.random()*16777215).toString(16); | |
| } | |
| // limpiar el canvas y dibujar el círculo en la nueva posición | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| renderCircle(ctx,circleSize,x,y,color); | |
| renderText(ctx,x, y); | |
| }, 1000 / 60); | |
| } | |
| function renderCircle(ctx,circleSize,x,y,color){ | |
| // dibujar el círculo en la posición aleatoria | |
| ctx.beginPath(); | |
| ctx.arc(x, y, circleSize, 0, 2 * Math.PI); | |
| ctx.fillStyle = color; | |
| ctx.fill(); | |
| //dibujar el borde del círculo | |
| ctx.lineWidth = 2; | |
| ctx.strokeStyle = "#000000"; | |
| ctx.stroke(); | |
| } | |
| // dibujar el texto | |
| function renderText(ctx,x,y){ | |
| ctx.font = "20px sans-serif"; | |
| ctx.fillStyle = "#0000FF"; | |
| ctx.strokeStyle = "#000000"; | |
| ctx.fillText("DVD", (x-25), y); | |
| ctx.strokeText("DVD",(x-25), y); | |
| } | |
| drawDVD(50, 5, {x: 1, y: 1}); | |
| /*drawDVD(30, 10, {x: -1, y: 1});*/ | |
| function resizeCanvas() { | |
| var canvas = document.getElementById("dvd-canvas"); | |
| var viewportWidth = window.innerWidth; | |
| var viewportHeight = window.innerHeight; | |
| canvas.width = viewportWidth; | |
| canvas.height = viewportHeight; | |
| } | |
| window.addEventListener("load", resizeCanvas); | |
| window.addEventListener("resize", resizeCanvas); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment