像素化动画答案

【问题标题】：Pixelate animation像素化动画
【发布时间】：2021-12-24 07:48:17
【问题描述】：

我正在尝试对动画进行像素化。我有一个 .png 图像，我在其中剪切了帧。我有一个滚动条，它给出一个数字，这是每个像素的新大小。 (光栅尺寸) 我已经为图像做了它并且它正在工作。 http://bht-homework.com/RMA/PIX_PRES1/

但对于动画来说，它看起来并不计算第一个像素。 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);
                }
          }

有人知道如何解决它吗？谢谢！

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

虽然它看起来会跳过图像的前几个像素，但实际上它只是在错误的位置绘制块。它被rasterSize 抵消。

您需要将像素移回正确的位置。

所以简单地替换

context.fillRect(x, y, rasterSize, rasterSize);

通过

context.fillRect(x - rasterSize, y - rasterSize, rasterSize, rasterSize);

【讨论】：