LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-01-04 01:05:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

Base: Add a demo web page for canvas+setInterval+randomness

Browse Source 
Click somewhere in the black area and drag for colorful effect! :^)
This commit is contained in:
Andreas Kling 2020-03-21 19:07:21 +01:00
parent fd5a3b3c39
commit 065db26d7c
Notes: sideshowbarker 2024-07-19 08:11:45 +09:00 
Author: https://github.com/awesomekling
Commit: https://github.com/SerenityOS/serenity/commit/065db26d7c5
2 changed files with 55 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
Base/home/anon/www/demo.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE>
<html>
<head>
<title>Canvas, timer, random and event demo</title>
</head>
<body>
<canvas id=c width=400 height=300></canvas>
<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);
</script>
</body>
</html>

1
Base/home/anon/www/welcome.html
View File

@ -23,6 +23,7 @@ h1 {
<p>This is a very simple browser built on the LibWeb engine.</p>
<p>Some small test pages:</p>
<ul>
<li><a href="demo.html">fun demo</a></li>
<li><a href="canvas.html">canvas 2D test</a></li>
<li><a href="events.html">simple DOM events test</a></li>
<li><a href="dom.html">simple DOM JS test</a></li>