Versión 1
https://canvaspuntitos1--financieras.repl.co
Recargando la página con F5 en nuestro navegador hemos creado el siguiente gif animado.
El código utilizado es el siguiente.
HTML
El fichero se llama index.html. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>Gamedev Canvas Workshop</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script src="index.js"></script>
</body>
</html>
CSS
El fichero se llama index.css. * { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }
JavaScript
El fichero se llama index.js. var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
for (i = 0; i < 100000; i++) {
x=Math.floor(Math.random() * canvas.width) + 1;
y=Math.floor(Math.random() * canvas.height) + 1;
ctx.fillRect(x,y,1,1);
}
ctx.closePath();
Veamos un GIF animado que se obtiene recargando la página web. El gif animado se ha creado con GifCam.exe
Cada vez que se recarga la página se generan 100.000 nuevos puntos aleatorios que se muestran en el canvas.
Versión 2
En la segunda versión de este código lo que queremos es crear una circunferencia con los puntos aleatorios. Cambia el código JavaScript.JavaScript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
for (i = 0; i < 100000; i++) {
x=Math.floor(Math.random() * canvas.width) + 1-canvas.width/2;
y=Math.floor(Math.random() *canvas.height) + 1-canvas.width/2;
if (y<Math.sqrt((canvas.width/2)**2-x**2) && y>-Math.sqrt((canvas.width/2)**2-x**2)){
ctx.fillRect(x+canvas.width/2,y+canvas.width/2,1,1);
}
}
ctx.closePath();
La página dónde se puede ver es la siguiente.
https://canvasPuntitos2--financieras.repl.co
Lo que se hace con el
if es eliminar los puntos que quedan fuera del circulo. Solo se representan en el canvas los puntitos que quedan dentro del circulo.Versión 3
Vamos a crear la función draw() que se repetirá cada 100 milisegundos gracias a la siguiente sentencia.setInterval(draw, 100);Nuestro código quedará así.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
for (i = 0; i < 100000; i++) {
x=Math.floor(Math.random() * canvas.width) + 1-canvas.width/2;
y=Math.floor(Math.random() *canvas.height) + 1-canvas.width/2;
if (y<Math.sqrt((canvas.width/2)**2-x**2) && y>-Math.sqrt((canvas.width/2)**2-x**2)){
ctx.fillRect(x+canvas.width/2,y+canvas.width/2,1,1);
}
}
ctx.closePath();
}
setInterval(draw, 100);
Podemos ver la esfera actualizándose 10 veces cada segundo en la siguiente página.
No hay comentarios:
Publicar un comentario