Alguna vez utilizado las primitivas gráficas con html5 nos ha faltado la de dibujar puntos. Una solución podría ser agregar a la librería de JavaScript ya existente un método al que llamaremos punto con los parámetros x e y.
Para dibujar un punto hacemos servir el método "fillRect" que nos dibuja un rectángulo. Los parámetros que hay que pasar son el origen x e y mas el ancho y alto. Como vamos a dibujar un punto pondremos ancho y alto con valor igual a 1.
<![CDATA[
CanvasRenderingContext2D.prototype.punto = function(x,y)
{
this.fillRect(x,y,1,1);
}
]]>
El código completo con la solución se muestra seguidamente.
<![CDATA[
<!--DOCTYPE html-->
<html>
<title>Prueba punto</title>
<head>
<!-- Definimos estilos -->
<style type="text/css">
body
{
background: black;
}
#lienzo
{
width: 400px;
height: 400px;
background: #f2f4ff;
}
</style>
<!-- Introducimos código JavaScript -->
<script type="text/javascript">
CanvasRenderingContext2D.prototype.punto = function(x,y)
{
this.fillRect(x,y,1,1);
}
window.onload=function()
{
ele=document.getElementById('lienzo');
ctx=ele.getContext("2d");
maximo=299;
minimo=99;
for (i=0;i<50000;i++)
{
x=Math.floor(Math.random()*(maximo-minimo+1))+minimo;
y=Math.floor(Math.random()*(maximo-minimo+1))+minimo;
cr=Math.floor(Math.random()*(255+1));
cg=Math.floor(Math.random()*(255+1));
cb=Math.floor(Math.random()*(255+1));
ctx.fillStyle = "rgba("+cr+","+cg+","+cb+",1)";
ctx.punto(x,y);
}
}
</script>
</head>
<body>
<!-- width="" height="" si variamos aqui escalamos -->
<canvas id="lienzo" width="400" height="400">
<p>Navegador no soporta canvas. Aquí debería haber una imagen</p>
</canvas>
</body>
</html>
]]>
Si ejecutamos este código podremos ver una zona cuadrada rellena de puntos en varios colores.
No hay comentarios:
Publicar un comentario