Estoy tratando de pixelar una animación. Tengo una imagen .png donde corté cuadros. Tengo una barra de desplazamiento que da un número, que es el nuevo tamaño de cada píxel. (rasterSize) Ya lo hice para una imagen y está funcionando. http://bht-homework.com/RMA/PIX_PRES1/
Pero para la animación parece que no calcula los primeros píxeles. http://bht-homework.com/RMA/PIX_PRES2/
var imgData=context.getImageData(0,0,img.width,img.height);// width is 190,height 240 for (var x = 0; x < spriteSizeWidth; x++) { for (var y = 0; y < spriteSizeHeight; y++) { var rasterX = ((x / rasterSize) | 0) * rasterSize; var rasterY = ((y / rasterSize) | 0) * rasterSize; var rasterValIndex = (rasterX + rasterY * imgData.width) * 4; r=imgData.data[rasterValIndex]; g=imgData.data[rasterValIndex + 1]; b=imgData.data[rasterValIndex + 2]; a=imgData.data[rasterValIndex + 3]; context.fillStyle="rgba(" +r+","+g+","+b+","+a+")"; context.fillRect(x,y,rasterSize,rasterSize); } }¿Alguien tiene una idea de cómo solucionarlo? ¡Gracias!
Aunque puede parecer que se saltaría los primeros píxeles de la imagen, en realidad solo dibuja los bloques en la posición incorrecta. Está compensado por rasterSize .
Debe volver a desplazar los píxeles a la posición correcta.
Así que simplemente reemplace
context.fillRect(x, y, rasterSize, rasterSize);por
context.fillRect(x - rasterSize, y - rasterSize, rasterSize, rasterSize);