Metode getImageData() mengembalikan objek ImageData, yang menyalin data piksel dari persegi panjang kanvas yang ditentukan.
Catatan: Objek ImageData bukan gambar. Objek ini menentukan bagian (persegi panjang) kanvas dan menyimpan informasi setiap piksel di dalam persegi panjang.
Untuk setiap piksel pada objek ImageData terdapat empat aspek informasi yaitu nilai RGBA:
A - saluran alfa (0-255; 0 transparan, 255 terlihat sepenuhnya)
Informasi warna/alfa ada dalam bentuk array dan disimpan dalam atribut data objek ImageData.
Tip: Setelah mengoperasikan informasi warna/alfa dalam array, Anda dapat menggunakan metode putImageData() untuk menyalin data gambar kembali ke kanvas.
Dua kode<!DOCTYPE html><html><head> <meta name=author content=Yeeku.H.Lee(CrazyIt.org) /> <meta http-equiv=Content-Type content=text/html; <title> Ubah transparansi</title></head><body><h2> Ubah transparansi</h2><canvas id=mc width=600 height=460 style=border:1px solid black></canvas><script type=text/javascript> // Dapatkan objek DOM yang sesuai dengan elemen kanvas var canvas = document.getElementById('mc'); // Dapatkan objek CanvasRenderingContext2D untuk menggambar di atas kanvas var ctx = kanvas.getContext('2d'); var gambar = Gambar baru(); gambar.src = tes.png; Gunakan metode dengan parameter transparansi untuk menggambar gambar drawImage(image, 124, 20, 0.4 } var drawImage = function(image, x, y, alpha) { // Menggambar gambar ctx.drawImage(image, x, y ); / / Dapatkan data gambar mulai dari x, y, dengan lebar gambar.lebar dan tinggi gambar.tinggi // Artinya, dapatkan data gambar yang digambar var imgData = ctx.getImageData(x, y, image.width, image.height); for (var i = 0, len = imgData.data.length; i < len; i += 4) { // Ubah setiap piksel Transparansi imgData.data[i + 3] = imgData.data[i + 3] * alpha; // Masukkan kembali data gambar yang diperoleh. ctx.putImageData(imgData, x, y);</script></body></html>Tiga hasil berjalan
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.