Phương pháp putImageData() trên canvas

Hướng dẫn tham khảo Canvas

Định nghĩa và cách sử dụng

putImageData() Phương pháp đặt lại dữ liệu hình ảnh (từ đối tượng ImageData được chỉ định) trên canvas.

Lưu ý:Xem thêm getImageData() Phương pháp sao chép dữ liệu pixel của hình tròn cụ thể trên canvas.

Lưu ý:Xem thêm createImageData() Phương pháp tạo ra đối tượng ImageData mới trống.

Mô hình

Dưới đây là mã nguồn sao chép dữ liệu pixel của矩形的像素数据 từ canvas cụ thể và sau đó đặt lại dữ liệu hình ảnh trên canvas bằng putImageData():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

Thử ngay

Cú pháp

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

Giá trị tham số

Tham số Mô tả
imgData Đối tượng ImageData cần đặt lại trên canvas.
x Tọa độ x của góc trên cùng bên trái của đối tượng ImageData, tính bằng pixel.
y Tọa độ y của góc trên cùng bên trái của đối tượng ImageData, tính bằng pixel.
dirtyX Tùy chọn. Giá trị ngang (x), tính bằng pixel, là vị trí đặt ảnh trên canvas.
dirtyY Tùy chọn. Giá trị ngang (y), tính bằng pixel, là vị trí đặt ảnh trên canvas.
dirtyWidth Tùy chọn. Chiều rộng được sử dụng để vẽ ảnh trên canvas.
dirtyHeight Tùy chọn. Chiều cao được sử dụng để vẽ ảnh trên canvas.

Trình duyệt hỗ trợ

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

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

Ghi chú:Trình duyệt Internet Explorer 8 và các phiên bản trước không hỗ trợ yếu tố <canvas>.

Hướng dẫn tham khảo Canvas