tutorial pengembangan web terbaru
 

HTML canvas putImageData() Method

<Canvas Object

Contoh

Kode di bawah salinan data pixel untuk persegi panjang yang ditentukan pada kanvas dengan getImageData() , dan kemudian menempatkan data gambar kembali ke kanvas dengan putImageData() :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
Cobalah sendiri "

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

metode
putImageData() 4.0 9.0 3.6 4.0 10.1

Definisi dan Penggunaan

The putImageData() metode menempatkan data gambar (from a specified ImageData object) kembali ke kanvas.

Tip: Baca tentang getImageData() metode yang salinan data pixel untuk persegi panjang tertentu pada kanvas.

Tip: Baca tentang createImageData() metode yang menciptakan baru, kosong objek imageData.


JavaScript Sintaks

sintaks JavaScript: context . putImageData( imgData,x,y, dirtyX,dirtyY,dirtyWidth,dirtyHeight ) ;

Nilai parameter

Parameter Deskripsi
imgData Menentukan objek imageData untuk menempatkan kembali ke kanvas
x Koordinat x, dalam piksel, dari sudut kiri atas objek imageData
y Y-koordinat, dalam piksel, dari sudut kiri atas objek imageData
dirtyX Pilihan. Horizontal (x) nilai, dalam pixel, di mana untuk menempatkan gambar pada kanvas
dirtyY Pilihan. Vertikal (y) nilai, dalam pixel, di mana untuk menempatkan gambar pada kanvas
dirtyWidth Pilihan. lebar untuk menggunakan untuk menarik gambar pada kanvas
dirtyHeight Pilihan. tinggi untuk menggunakan untuk menarik gambar pada kanvas

<Canvas Object