mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 22:22:45 +00:00
54 lines
1.2 KiB
HTML
54 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<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>
|