Composition (hợp thành) trong Canvas xác định cách các hình vẽ mới (source) kết hợp với nội dung đã có trên canvas (destination). Thuộc tính globalCompositeOperation điều khiển hành vi này.
Các giá trị chính của globalCompositeOperation
| Giá trị | Mô tả |
|---|---|
source-over (mặc định) | Vẽ mới lên trên cũ |
source-in | Chỉ giữ phần mới chồng lên cũ |
source-out | Chỉ giữ phần mới KHÔNG chồng lên cũ |
source-atop | Phần mới chồng lên cũ + phần cũ không chồng |
destination-over | Vẽ mới DƯỚI cũ |
destination-in | Giữ phần cũ chồng lên mới |
destination-out | Xóa phần cũ chồng lên mới (tạo lỗ) |
destination-atop | Phần cũ chồng lên mới + phần mới không chồng |
lighter | Cộng màu (additive blending) |
darker | Trừ màu (darken) |
copy | Chỉ hiển thị mới, bỏ qua cũ |
xor | XOR: chỉ hiển thị nơi KHÔNG chồng lấn |
Ví dụ minh họa 12 chế độ
<!DOCTYPE HTML>
<html>
<head>
<script>
var compositeTypes = [
'source-over','source-in','source-out','source-atop',
'destination-over','destination-in','destination-out',
'destination-atop','lighter','darker','copy','xor'
];
function drawShape(){
for (var i=0; i<compositeTypes.length; i++) {
var ctx = document.getElementById('tut'+i).getContext('2d');
// Vẽ hình chữ nhật đỏ (destination)
ctx.fillStyle = "#FF3366";
ctx.fillRect(15,15,70,70);
// Thiết lập composite mode
ctx.globalCompositeOperation = compositeTypes[i];
// Vẽ hình tròn xanh (source) chồng lên
ctx.fillStyle = "#0066FF";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
}
}
</script>
</head>
<body onload="drawShape();">
<table border="1" align="center">
<tr><td><canvas id="tut0" width="125" height="125"></canvas><br/><label id="lab0"></label></td>...</tr>
<!-- lặp cho 12 canvas -->
</table>
</body>
</html>
Ứng dụng thực tế
destination-out: Tạo hiệu ứng "cạo" (scratch card), xóa phần của hình.lighter: Hiệu ứng ánh sáng, glow, particle additive.source-atop: Masking, clipping hình ảnh vào hình dạng.xor: Hiệu ứng chồng lấn phức tạp.