We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ladybird
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Base: Move fun canvas demo JavaScript to seperate file

This will allow this demo to be reused for other tests.
MacDue 3 years ago
parent
b179d514d9
commit
b21d95bbe3
2 changed files with 48 additions and 43 deletions
Unified View Show Diff Stats
  1. 2 43
      Base/res/html/misc/demo.html
  2. 46 0
      Base/res/html/misc/fun-canvas.js

+ 2 - 43
Base/res/html/misc/demo.html
View File 

@@ -5,50 +5,9 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <canvas id=c width=400 height=300></canvas>
 
 <canvas id=c width=400 height=300></canvas>
 
+<script src="fun-canvas.js"></script>
 
 <script>
 
 <script>
 
-c = document.getElementById("c");
 
-ctx = c.getContext("2d");
 
-ctx.fillStyle = 'black';
 
-ctx.fillRect(0, 0, c.width, c.height);
 
-
 
-pressed = false;
 
-mouseX = 0;
 
-mouseY = 0;
 
-
 
-c.addEventListener("mousedown", function(e) {
 
-    // mousedown
 
-    pressed = true;
 
-    mouseX = e.offsetX;
 
-    mouseY = e.offsetY;
 
-});
 
-
 
-c.addEventListener("mouseup", function() {
 
-    // mouseup
 
-    pressed = false;
 
-});
 
-
 
-c.addEventListener("mousemove", function(e) {
 
-    // mousemove
 
-    mouseX = e.offsetX;
 
-    mouseY = e.offsetY;
 
-});
 
-
 
-function update() {
 
-    if (pressed) {
 
-        var r = Math.random() * 255;
 
-        var g = Math.random() * 255;
 
-        var b = Math.random() * 255;
 
-        var color = "rgb(" + ~~r + "," + ~~g + "," + ~~b + ")";
 
-        ctx.fillStyle = color;
 
-        const spread = 35;
 
-        var x = mouseX + (Math.random() * spread) - (spread / 2);
 
-        var y = mouseY + (Math.random() * spread) - (spread / 2);
 
-        var size = Math.random() * 8;
 
-        ctx.fillRect(x, y, size, size);
 
-    }
 
-}
 
-
 
-setInterval(update, 20);
 
+    makeFunCanvas("c")
 
 </script>
 
 </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 46 - 0
Base/res/html/misc/fun-canvas.js
View File 

@@ -0,0 +1,46 @@
 
+const makeFunCanvas = canvasId => {
 
+    c = document.getElementById(canvasId);
 
+
 
+    ctx = c.getContext("2d");
 
+    ctx.fillStyle = "black";
 
+    ctx.fillRect(0, 0, c.width, c.height);
 
+
 
+    pressed = false;
 
+    mouseX = 0;
 
+    mouseY = 0;
 
+
 
+    c.addEventListener("mousedown", function (e) {
 
+        // mousedown
 
+        pressed = true;
 
+        mouseX = e.offsetX;
 
+        mouseY = e.offsetY;
 
+    });
 
+
 
+    c.addEventListener("mouseup", function () {
 
+        // mouseup
 
+        pressed = false;
 
+    });
 
+
 
+    c.addEventListener("mousemove", function (e) {
 
+        // mousemove
 
+        mouseX = e.offsetX;
 
+        mouseY = e.offsetY;
 
+    });
 
+
 
+    function update() {
 
+        if (pressed) {
 
+            var r = Math.random() * 255;
 
+            var g = Math.random() * 255;
 
+            var b = Math.random() * 255;
 
+            var color = "rgb(" + ~~r + "," + ~~g + "," + ~~b + ")";
 
+            ctx.fillStyle = color;
 
+            const spread = 35;
 
+            var x = mouseX + Math.random() * spread - spread / 2;
 
+            var y = mouseY + Math.random() * spread - spread / 2;
 
+            var size = Math.random() * 8;
 
+            ctx.fillRect(x, y, size, size);
 
+        }
 
+    }
 
+
 
+    setInterval(update, 20);
 
+};

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5