如果可以在JavaScript中對像素化的畫布正方形進行動畫處理

Question

因此，您可以像這樣通過在畫布上繪制圖像來像素化圖像：

/* 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

我想知道是否有一種方法可以弄清楚這些正方形在畫布中的位置以及它們是什么顏色的，以便您可以對它們進行處理，例如（在這種情況下）對它們進行動畫處理，以使它們看起來像在閃爍，或者只是簡單地像波浪一樣來回移動它們。

Answer 1

恐怕由於像素化 “庫”如何創建像素化，因此它是不可能的。 它只是使用原始的寬度和高度來拉伸原始圖像的按比例縮小的版本-因此沒有任何單獨的矩形。

您可以自己執行此操作。 基本上，您確實要確定馬賽克的pixelSize-例如16。現在循環遍歷完整圖像，並在屏幕坐標上獲得單個1x1像素的顏色，該像素是pixelSize的倍數。 最后，將每個像素位置，大小和顏色存儲在一個數組中。

現在，您可以遍歷數組並將各個矩形繪制到畫布上，或根據需要對其進行動畫處理。

這是一個例子：

 Square = function(x, y, w, h, color) { this.x = x; this.y = y; this.width = w; this.height = h; this.color = color; } var squares = new Array(); 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(canvas); document.body.appendChild(canvas2); function rgbToHex(r, g, b) { return ((r << 16) | (g << 8) | b).toString(16); } var img = new Image(); img.onload = function() { context.drawImage(this, 0, 0); var pixelSize = 8; var ySteps = Math.round(this.height / pixelSize); var xSteps = Math.round(this.width / pixelSize); var colorX; var colorY; var square; var color; var hexColor; for (var i = 0; i <= ySteps; i++) { if (i == ySteps) { colorY = pixelSize * (i - 1); } else { colorY = pixelSize * (i); } for (var j = 0; j <= xSteps; j++) { if (j == xSteps) { colorX = pixelSize * (j - 1); } else { colorX = pixelSize * (j); } color = context.getImageData(j * pixelSize, i * pixelSize, 1, 1).data; hexColor = "#" + ("000000" + rgbToHex(color[0], color[1], color[2])).slice(-6); square = new Square(j * pixelSize, i * pixelSize, pixelSize, pixelSize, hexColor); squares.push(square); } } for (var a = 0; a < squares.length; a++) { square = squares[a]; context2.fillStyle = square.color; context2.fillRect(square.x, square.y, square.width, square.height); } } img.crossOrigin = "anonymous"; img.src = "https://picsum.photos/id/76/200/100";