Funciona en:![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHxDa-aNrkmfSPWwOfrvMJkHHpc2tCfgA50eC9WetOB4UTKQGeB21qI0LAmpJyP57Aj5NXzka1_NVkjfnreDi0zhXQ-rAgCGOHQnsK9UglaOe9P4INZ_7Nw_b8pAkb10OBAYEXuqrEvQk/s400/Chrome.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7hrSYW0RG7j3yEjl1yMXR-TN0hEMg0xs00kjiz1hPL5CufwNWGLCDRN6xmt-wTqGkpy9mcGeGeRAdoPfOdQNk5AS3D9s5t9j3P6mgO-jr1j8O4YjKIjYMMe9FHL_zS6-WE4DYcDoepcw/s400/icon_firefox.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaEqLUQwCseh4mCBLV-FcTF33Ps3V1lNAp7bNonrMIsgoHvYgwatc0BuwkugFOWtvq10jnCX0rf0qlK0I3zfRe7ZxnGe4b76UHmddhxj0ZfhDv6m62Tatnfv8PDGH63Y5dJE1BUULGnjc/s400/icon_safari.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmsEMr8aJrHP5UcUUELIB2tXzT7IhMU9eez9X2p6ttR8Ux7GD0xCka8FjO-qZ6vgGQJJE62_5LFYsQ-ICGtfHHYu3QwUP79b-P6vdlINlT55SZr0MCgKNI0MnvjrFgHhfAi2MpDLIlPG8/s400/icon_opera.gif)
En este tutorial vamos a aprender como pintar pixel a pixel un canvas de Html 5, la dificultad del tutorial es media. De ejemplo en este tutorial vamos a crear una nube de pixeles aleatoriamente situados, los colores serán rgba de tonos aleatorios. El resultado final del tutorial sería este:![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHxDa-aNrkmfSPWwOfrvMJkHHpc2tCfgA50eC9WetOB4UTKQGeB21qI0LAmpJyP57Aj5NXzka1_NVkjfnreDi0zhXQ-rAgCGOHQnsK9UglaOe9P4INZ_7Nw_b8pAkb10OBAYEXuqrEvQk/s400/Chrome.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7hrSYW0RG7j3yEjl1yMXR-TN0hEMg0xs00kjiz1hPL5CufwNWGLCDRN6xmt-wTqGkpy9mcGeGeRAdoPfOdQNk5AS3D9s5t9j3P6mgO-jr1j8O4YjKIjYMMe9FHL_zS6-WE4DYcDoepcw/s400/icon_firefox.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaEqLUQwCseh4mCBLV-FcTF33Ps3V1lNAp7bNonrMIsgoHvYgwatc0BuwkugFOWtvq10jnCX0rf0qlK0I3zfRe7ZxnGe4b76UHmddhxj0ZfhDv6m62Tatnfv8PDGH63Y5dJE1BUULGnjc/s400/icon_safari.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmsEMr8aJrHP5UcUUELIB2tXzT7IhMU9eez9X2p6ttR8Ux7GD0xCka8FjO-qZ6vgGQJJE62_5LFYsQ-ICGtfHHYu3QwUP79b-P6vdlINlT55SZr0MCgKNI0MnvjrFgHhfAi2MpDLIlPG8/s400/icon_opera.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJPT8RVTFCtpR4mPJyyMYw_4c_h24MrmmiMEcuv4QvpFA-gTyXXIuCeVfQUxdXPnhS0TEw4JEGBx5fA5_bzul3jvEGZxBEdaQcNIkcNS-518cfN3mqP_p74vn_Pd0b-h_gnk1U9GrnYHA/s400/pixeles.png)
Lo primero que vamos a hacer es crear un canvas Html5:
<canvas id="canvas" width="900" height="900"> (texto si el navegador no soporta canvas) </canvas>
Una vez creado el canvas vamos a escribir el Javascript que será el encargado de calcular el color, la localización y cantidad de pixeles. El codigo está totalmente comentado, si tenéis alguna duda no dudéis en escribirlo en un comentário:
<!-- Iniciamos el javacript encargado de manipular todos los pixeles--> <script type="text/javascript"> // Función pixel para dónde colocar los pixeles y canales de color function pixel(imageData, x, y, r, g, b, a){ //en los pixels al ser rgba hay que multiplicarlo por 4 inicial = (x + y * imageData.width) * 4; //seleccionamos pixel con matriz //indicamos el pixel(inicial) + el canal rgba //canal 0 es rojo imageData.data[inicial+0] = r; //canal 1 es verde imageData.data[inicial+1] = g; //canal 2 es azul imageData.data[inicial+2] = b; //el 3 sería el opaco imageData.data[inicial+3] = a; } //seleccionamos el canvas el_canvas = document.getElementById("canvas"); dibujo = el_canvas.getContext("2d"); // Cogemos el ancho y alto del canvas width = parseInt(el_canvas.getAttribute("width")); height = parseInt(el_canvas.getAttribute("height")); //creamos un pixel array imageData = dibujo.createImageData(width, height); //1000001 pixel y posiciones aleatorias for (i = 0; i < 1000001; i++) { //calculamos las posiciones aleatoria x = parseInt(Math.random() * width); y = parseInt(Math.random() * height); //calculamos el tono del color de manera aleatoria r = parseInt(Math.random() * 256); g = parseInt(Math.random() * 256); b = parseInt(Math.random() * 256); //La a será la propiedad opaco a = 0xff; //llamamos a la funcion pixel para crear pixel y //pasamos los parametros pixel(imageData, x, y, r, g, b, a) } //lo imprimimos en el canvas y las coordenadas dibujo.putImageData(imageData, 0, 0); </script>
Para ver un ejemplo en vivo haga click en el siguiente botón:
No olvide escribir su comentario!!!
is it generating hidden 3D shape inside image?
ResponderEliminarNo, only paint pixel by pixel.
ResponderEliminarThanks
¿ Can I draw triangles ? Thanks
ResponderEliminarI want to fill triangles with a preloaded texture bitmap. I think that filling the triangle with rectangles of 1x1 might be quite slow ...
ResponderEliminarCghht
ResponderEliminar1365 Cesar Adrián González López
ResponderEliminarEyyffjñyrh8ksutd
Hiruxieudueidhidhzodgz
ResponderEliminarHi lo más pronto
ResponderEliminar