38 lines
1.1 KiB
HTML
38 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|
<title>Composited canvases with internal animation</title>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
var size = 2048;
|
|
var numCanvases = 2;
|
|
var canvas = new Array();
|
|
var squareSize = size / numCanvases;
|
|
for (i = 0; i < numCanvases; i++) {
|
|
var c = document.createElement("canvas");
|
|
c.width = c.height = size;
|
|
c.style.left = c.style.top = "0px";
|
|
c.style.position = "absolute";
|
|
document.body.appendChild(c);
|
|
canvas[i] = c;
|
|
}
|
|
|
|
function redraw() {
|
|
var i;
|
|
for (i = 0; i < numCanvases; i++) {
|
|
var c = canvas[i];
|
|
var ctx = c.getContext("2d");
|
|
ctx.fillStyle = "rgba(1, 1, 1, 0.01)";
|
|
ctx.fillRect(0, 0, size, size);
|
|
ctx.fillStyle = "rgba(0, 255, 0, 0.5)";
|
|
ctx.fillRect(Math.random() * c.width, Math.random() * c.height, squareSize, squareSize);
|
|
}
|
|
window.setTimeout(redraw, 1);
|
|
}
|
|
window.setTimeout(redraw, 1);
|
|
</script>
|
|
<canvas height="2048" width="2048" style="top: 0px; left: 0px; position: absolute;"></canvas><canvas height="2048" width="2048" style="top: 0px; left: 0px; position: absolute;"></canvas>
|
|
</body>
|
|
</html> |