RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 15:57:45 +00:00
Code Issues Activity Actions

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
2 changed files with 55 additions and 0 deletions
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>This is a very simple browser built on the LibWeb engine.</p>
<p>Some small test pages:</p> <p>Some small test pages:</p>
<ul> <ul>
<li><a href="demo.html">fun demo</a></li>
<li><a href="canvas.html">canvas 2D test</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="events.html">simple DOM events test</a></li>
<li><a href="dom.html">simple DOM JS test</a></li> <li><a href="dom.html">simple DOM JS test</a></li>