Thuộc tính globalCompositeOperation của 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 = Bạn định đặt lên canvas.
Hình ảnh mục tiêu = Bạn đã đặt vẽ 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
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);
Ví dụ 2
Tất cả các giá trị thuộc tính globalCompositeOperation:
Cú pháp
context.globalCompositeOperation="source-in";
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| giá trị mặc định: | 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 cùng hình ảnh mục tiêu. Phần hình ảnh nguồn nằm ngoài hình ảnh mục tiêu sẽ không được hiển thị. |
| 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 mới được 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ỉ phần hình ảnh nguồn bên ngoài hình ảnh mục tiêu mới được hiển thị, hình ảnh mục tiêu trong suốt. |
| destination-over | Hiển thị hình ảnh mục tiêu ở trên hình ảnh nguồn. |
| destination-atop | Hiển thị hình ảnh mục tiêu ở trên cùng hình ảnh nguồn. Phần hình ảnh mục tiêu bên ngoài hình ảnh nguồn sẽ không được hiển thị. |
| destination-in | Hiển thị hình ảnh mục tiêu trong hình ảnh nguồn. Chỉ phần hình ảnh mục tiêu 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 mục tiêu bên ngoài hình ảnh nguồn. Chỉ phần hình ảnh mục tiêu 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 mục tiêu. |
| copy | Hiển thị hình ảnh nguồn. Bỏ qua hình ảnh mục tiêu. |
| xor | xor |
Sử dụng phép toán XOR để kết hợp hình ảnh nguồn với hình ảnh đích.
| Chi tiết kỹ thuật | giá trị mặc định: |
|---|
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 |
Chú thích:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.
