Thuộc tính globalCompositeOperation của canvas HTML

Tài liệu tham khảo HTML5 Canvas

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

globalCompositeOperation Cài đặt hoặc trả về cách vẽ một hình ảnh nguồn (mới) lên hình ảnh mục tiêu (cũ).

Hình ảnh nguồn = Đồ họa mà bạn định đặt lên canvas.

Hình ảnh mục tiêu = Đồ họa mà bạn đã đặt trên canvas.

Mô hình

Ví dụ 1

Vẽ hình vuông bằng các giá trị globalCompositeOperation khác nhau. Hình vuông đỏ là hình ảnh mục tiêu. Hình vuông xanh là hình ảnh nguồn:

　　　　　source-over 　　　　　　　　　　　　destination-over

Trình duyệt của bạn không hỗ trợ thẻ canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);

Thử ngay

Ví dụ 2

Tất cả các giá trị thuộc tính globalCompositeOperation:

Thử ngay

Cú pháp

context.globalCompositeOperation="source-in";

Giá trị thuộc tính

Giá trị Mô tả
source-over Mặc định. Hiển thị hình ảnh nguồn trên hình ảnh mục tiêu.
source-atop Hiển thị hình ảnh nguồn ở trên hình ảnh mục tiêu. Phần hình ảnh nguồn bên ngoài hình ảnh mục tiêu không thể nhìn thấy.
source-in Hiển thị hình ảnh nguồn trong hình ảnh mục tiêu. Chỉ phần hình ảnh nguồn trong hình ảnh mục tiêu sẽ hiển thị, hình ảnh mục tiêu trong suốt.
source-out Hiển thị hình ảnh nguồn bên ngoài hình ảnh mục tiêu. Chỉ hiển thị phần hình ảnh nguồn bên ngoài hình ảnh mục tiêu, hình ảnh mục tiêu trong suốt.
destination-over Hiển thị hình ảnh đích ở trên hình ảnh nguồn.
destination-atop Hiển thị hình ảnh đích ở trên hình ảnh nguồn. Các phần hình ảnh đích bên ngoài hình ảnh nguồn không được hiển thị.
destination-in Hiển thị hình ảnh đích trong hình ảnh nguồn. Chỉ phần hình ảnh đích trong hình ảnh nguồn mới được hiển thị, hình ảnh nguồn trong suốt.
destination-out Hiển thị hình ảnh đích bên ngoài hình ảnh nguồn. Chỉ phần hình ảnh đích bên ngoài hình ảnh nguồn mới được hiển thị, hình ảnh nguồn trong suốt.
lighter Hiển thị hình ảnh nguồn + hình ảnh đích.
copy Hiển thị hình ảnh nguồn. Bỏ qua hình ảnh đích.
xor Kết hợp hình ảnh nguồn và hình ảnh đích bằng phép toán XOR.

Chi tiết kỹ thuật

Giá trị mặc định: source-over

Hỗ trợ trình duyệt

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>.

Tài liệu tham khảo HTML5 Canvas