Metode createImageData() dalam HTML canvas

HTML5 Canvas 参考手册

Definisi dan penggunaan

createImageData() Metode untuk membuat objek ImageData kosong baru. Nilai piksel default objek baru adalah hitam transparen.

Untuk setiap piksel dalam objek ImageData, terdapat empat jenis informasi, yaitu nilai RGBA:

  • R - Merah (0-255)
  • G - Hijau (0-255)
  • B - Kuning (0-255)
  • A - 通道 alpha (0-255; 0 ialah yang terang, 255 ialah yang dapat dilihat sepenuhnya)

Jadi, hitam transparen diwakili (0,0,0,0).

warna/alpha ada dalam bentuk array, dan kerana array mengandungi empat buah maklumat untuk setiap piksel, saiz array adalah empat kali saiz objek ImageData. (Ada cara yang lebih mudah untuk mendapatkan saiz array, iaitu menggunakan ImageDataObject.data.length)

Array yang mengandungi maklumat warna/alpha disimpan di dalam objek ImageData di data aturan.

Peringatan:Selepas operasi selesai terhadap maklumat warna/alpha dalam array, anda boleh menggunakan putImageData() Kaedah akan menyalin data imej ke atas kertas lukis.

Contoh:

Sintaks ini akan menjadikan piksel pertama dalam objek ImageData menjadi merah:

imgData = ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

Sintaks ini akan menjadikan piksel kedua dalam objek ImageData menjadi merah:

imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

Contoh

Buat objek ImageData 100x100 piksel dengan setiap piksel berwarna merah, lalu taruhkannya ke atas kertas lukis:

Pemintaan anda tidak mendukung tag HTML5 canvas.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData =ctx.createImageData(100, 100);
for (var i = 0; i < imgData.data.length; i += 4)
  {
  imgData.data[i+0] = 255;
  imgData.data[i+1] = 0;
  imgData.data[i+2] = 0;
  imgData.data[i+3] = 255;
  }
ctx.putImageData(imgData, 10, 10);

Cuba sendiri

Sintaks

Terdapat dua versi daripada kaedah createImageData():

1. 以指定的尺寸（以像素计）创建新的 ImageData 对象：

var imgData=context.createImageData(width,height);

2. 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）：

var imgData=context.createImageData(imageData);

参数值

参数 描述
width ImageData 对象的宽度，以像素计。
height ImageData 对象的高度，以像素计。
imageData 另一个 ImageData 对象。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注释：Internet Explorer 8 及其更早版本不支持 <canvas> 元素。

HTML5 Canvas 参考手册