diff options
| author | Andreas Kling <kling@serenityos.org> | 2020-03-21 19:07:21 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2020-03-21 19:07:21 +0100 |
| commit | 065db26d7c54007d6bb2bdc9c7bd78a74d4396cd (patch) | |
| tree | 3a35b269576b81a10d8be9960c67c3842fc0e8f3 /Base/home/anon/www | |
| parent | fd5a3b3c391dd4ae872914c7c2dcb77298dc2fb1 (diff) | |
| download | serenity-065db26d7c54007d6bb2bdc9c7bd78a74d4396cd.zip | |
Base: Add a demo web page for canvas+setInterval+randomness
Click somewhere in the black area and drag for colorful effect! :^)
Diffstat (limited to 'Base/home/anon/www')
| -rw-r--r-- | Base/home/anon/www/demo.html | 54 | ||||
| -rw-r--r-- | Base/home/anon/www/welcome.html | 1 |
2 files changed, 55 insertions, 0 deletions
diff --git a/Base/home/anon/www/demo.html b/Base/home/anon/www/demo.html new file mode 100644 index 0000000000..7c4c33b7e5 --- /dev/null +++ b/Base/home/anon/www/demo.html @@ -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> diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html index 336345221c..c2bb81c828 100644 --- a/Base/home/anon/www/welcome.html +++ b/Base/home/anon/www/welcome.html @@ -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> |