如果可以在JavaScript中设置像素化画布正方形的动画

因此，您可以通过在画布上绘制图像来对其进行像素化，如：

---

我想知道是否有一种方法可以找出正方形在画布中的位置，以及它们是什么颜色，这样你就可以用它们做一些事情，比如（在本例中）设置它们的动画，使它们看起来闪闪发光，或者更简单的方法是像波浪一样来回移动它们。

我担心，由于它创建像素化的方式，像素化“库”不可能。它只是使用原始宽度和高度拉伸原始图像的缩小版本，因此没有任何单独的矩形

然而，你可以自己做这件事。基本上，您必须确定马赛克的像素大小-例如16。现在，在整个图像上循环，并在像素大小的倍数的屏幕坐标处获得单个1x1像素的颜色。最后将每个像素的位置、大小和颜色存储在一个数组中

现在，您可以在阵列上循环并将各个矩形绘制到画布上，或者根据需要设置它们的动画

下面是一个例子：

Square=函数（x，y，w，h，颜色）{
这个.x=x；
这个。y=y；
这个宽度=w；
这个高度=h；
这个颜色=颜色；
}
var squares=新数组（）；
var canvas=document.createElement（“canvas”）；
var canvas2=document.createElement（“canvas”）；
canvas.width=canvas2.width=200；
canvas.height=canvas2.height=100；
var context=canvas.getContext（“2d”）；
var context2=canvas2.getContext（“2d”）；
document.body.appendChild（画布）；
文件.正文.附件（canvas2）；
函数rgbToHex（r、g、b）{
返回（（r）
/* css */
.pixelate {
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

// js
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')

context.webkitImageSmoothingEnabled = false
context.mozImageSmoothingEnabled = false
context.msImageSmoothingEnabled = false
context.imageSmoothingEnabled = false