Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Last active May 14, 2019 13:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaizemberg/9910af452cad53ece115cd82c03d03f2 to your computer and use it in GitHub Desktop.
Save aaizemberg/9910af452cad53ece115cd82c03d03f2 to your computer and use it in GitHub Desktop.
Download ZIP
Dibujando 30.000 círculos con <canvas>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>30.000 círculos</title>
</head>
<body>
<canvas id="myCanvas" width="960" height="500" style="border:1px solid #000;"></canvas>
<script>
function rc() {
return (Math.random() * 256);
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
for (i = 0; i < 30000; i++) {
ctx.beginPath();
ctx.arc(c.width * Math.random(),
c.height * Math.random(),
10 * Math.random(),
0,
2 * Math.PI);
ctx.fillStyle = 'rgba('+rc()+', '+rc()+', '+rc()+', 0.5)';
ctx.fill();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment