Merge pull request #6 from sahil-067/patch-1

Create Canvas.html
tecky708 · Oct 15, 2023 · 114f66a · 114f66a
2 parents fe004ad + 6bc8b37
commit 114f66a
Showing 1 changed file with 97 additions and 0 deletions.
diff --git a/Canvas.html b/Canvas.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Creative HTML</title>
+<style>
+body {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: black;
+}
+
+.canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.star {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 10px;
+  height: 10px;
+  background-color: white;
+  border-radius: 50%;
+}
+
+.star:nth-child(even) {
+  animation: twinkle 1s infinite;
+}
+
+.star:nth-child(odd) {
+  animation: twinkle 2s infinite;
+}
+
+@keyframes twinkle {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0.5;
+  }
+}
+</style>
+</head>
+<body>
+<canvas class="canvas"></canvas>
+
+<script>
+var canvas = document.querySelector(".canvas");
+var ctx = canvas.getContext("2d");
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+// Create a bunch of stars
+var stars = [];
+for (var i = 0; i < 1000; i++) {
+  var star = {
+    x: Math.random() * canvas.width,
+    y: Math.random() * canvas.height,
+    radius: Math.random() * 5
+  };
+
+  stars.push(star);
+}
+
+// Draw the stars
+function drawStars() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  for (var i = 0; i < stars.length; i++) {
+    var star = stars[i];
+
+    ctx.beginPath();
+    ctx.arc(star.x, star.y, star.radius, 0, 2 * Math.PI);
+    ctx.fillStyle = "white";
+    ctx.fill();
+  }
+}
+
+// Animate the stars
+function animate() {
+  drawStars();
+
+  requestAnimationFrame(animate);
+}
+
+animate();
+</script>
+</body>
+</html>