Bagaimana untuk Mengakses dan Memanipulasi Data Piksel dalam Kanvas HTML?

Mengakses Data Pixel dalam HTML Canvas

Adakah mungkin untuk mendapatkan semula warna piksel tertentu dalam objek HTML Canvas? Ya, anda boleh mengakses dan memanipulasi data piksel dalam HTML Canvas menggunakan pelbagai kaedah yang disediakan oleh API Kanvas.

Mendapatkan Warna Piksel

Untuk mendapatkan semula warna piksel di lokasi tertentu dalam kanvas, anda boleh menggunakan kaedah getImageData(). Kaedah ini mengembalikan objek ImageData yang mewakili sebahagian daripada kanvas. Objek ImageData mengandungi tatasusunan data piksel yang boleh anda akses menggunakan sifat .data.

Manipulasi Piksel

Setelah anda memperoleh data piksel, anda boleh memanipulasi ia seperti yang dikehendaki. Sebagai contoh, anda boleh mencipta imej skala kelabu dengan menukar setiap piksel kepada warna kelabu:

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and convert it to grayscale.
for (var i = 0, n = pix.length; i < n; i += 4) {
  var gray = (pix[i] + pix[i+1] + pix[i+2]) / 3;
  pix[i  ] = gray;
  pix[i+1] = gray;
  pix[i+2] = gray;
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

Dengan memanfaatkan kaedah getImageData() dan putImageData(), anda boleh melaksanakan pelbagai tugas manipulasi piksel, seperti penapisan imej, pelarasan warna dan mencipta kesan pada Kanvas HTML.

Atas ialah kandungan terperinci Bagaimana untuk Mengakses dan Memanipulasi Data Piksel dalam Kanvas HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!