Thuộc tính HTML canvas globalCompositeOperation
Thí dụ
Vẽ hình chữ nhật bằng cách sử dụng hai giá trị globalCompositeOperation khác nhau. Hình chữ nhật màu đỏ là hình ảnh đích . Hình chữ nhật màu xanh lam là hình ảnh nguồn :
nguồn qua
điểm đến
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);
Hỗ trợ trình duyệt
Internet Explorer 9, Firefox, Opera, Chrome và Safari hỗ trợ thuộc tính globalCompositeOperation.
Định nghĩa và Cách sử dụng
Thuộc tính globalCompositeOperation đặt hoặc trả về cách một hình ảnh nguồn (mới) được vẽ lên hình ảnh đích (hiện có).
source image = bản vẽ bạn sắp đặt lên canvas.
ảnh đích = bản vẽ đã được đặt trên canvas.
| Giá trị mặc định: | nguồn qua |
|---|---|
| Cú pháp JavaScript: | context .globalCompositeOperation = "source-in"; |
Giá trị tài sản
| Value | Description | Play it |
|---|---|---|
| source-over | Default. Displays the source image over the destination image | |
| source-atop | Displays the source image on top of the destination image. The part of the source image that is outside the destination image is not shown | |
| source-in | Displays the source image in to the destination image. Only the part of the source image that is INSIDE the destination image is shown, and the destination image is transparent | |
| source-out | Displays the source image out of the destination image. Only the part of the source image that is OUTSIDE the destination image is shown, and the destination image is transparent | |
| destination-over | Displays the destination image over the source image | |
| destination-atop | Displays the destination image on top of the source image. The part of the destination image that is outside the source image is not shown | |
| destination-in | Displays the destination image in to the source image. Only the part of the destination image that is INSIDE the source image is shown, and the source image is transparent | |
| destination-out | Displays the destination image out of the source image. Only the part of the destination image that is OUTSIDE the source image is shown, and the source image is transparent | |
| lighter | Displays the source image + the destination image | |
| copy | Displays the source image. The destination image is ignored | |
| xor | The source image is combined by using an exclusive OR with the destination image |
Thí dụ
Tất cả các giá trị thuộc tính globalCompositeOperation: