19/09/2018, 15:01
globalCompositeOperation trong Canvas
Vẽ hình chữ nhật sử dụng nhiều giá trị của thuộc tính globalCompositeOperation. Hình chữ nhật màu đỏ là hình đích (destination). Hình chữ nhật màu xanh là hình nguồn (source): Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 ...
Vẽ hình chữ nhật sử dụng nhiều giá trị của thuộc tính globalCompositeOperation. Hình chữ nhật màu đỏ là hình đích (destination). Hình chữ nhật màu xanh là hình nguồn (source):
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 20, 75, 50); ctx.fillStyle = "blue"; ctx.globalCompositeOperation = "source-over"; ctx.fillRect(50, 50, 75, 50); ctx.fillStyle = "red"; ctx.fillRect(150, 20, 75, 50); ctx.fillStyle = "blue"; ctx.globalCompositeOperation = "destination-over"; ctx.fillRect(180, 50, 75, 50); </script> </body> </html> |
Demo
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Thuộc tính globalCompositeOperation dùng để thiết lập hoặc trả về cách ảnh nguồn được vẽ trên một ảnh đích.
ảnh nguồn = là ảnh mới mà bạn muốn đưa vào canvas.
ảnh đích = là ảnh đã tồn tại trên canvas.
Giá trị mặc định: source-over
Cú pháp JavaScript: context.globalCompositeOperation=”source-in”;
Giá trị tham số
| Giá trị | Miêu tả |
|---|---|
| source-over | Mặc định. Hiển thị ảnh nguồn bên trên ảnh đích |
| source-atop | Hiển thị ảnh nguồn bên trên ảnh đích. Phần ảnh nguồn nằm ngoài ảnh đích sẽ không được hiển thị |
| source-in | Hiển thị ảnh nguồn nằm bên trong ảnh đích. Chỉ có phần ảnh nguồn nằm bên trong ảnh đích được hiển thị, ảnh đích sẽ mờ hoàn toàn |
| source-out | Hiển thị ảnh nguồn nằm ngoài ảnh đích. Chỉ có phần ảnh nguồn nằm ngoài ảnh đích được hiển thị, ảnh đích mờ hoàn toàn |
| destination-over | Hiển thị ảnh đích bên trên ảnh nguồn |
| destination-atop | Hiển thị ảnh đích bên trên ảnh nguồn. Phần ảnh đích nằm ngoài ảnh nguồn sẽ không được hiển thị |
| destination-in | Hiển thị ảnh đích nằm bên trong ảnh nguồn. Chỉ có phần ảnh đích nằm bên trong ảnh nguồn được hiển thị, ảnh nguồn sẽ mờ hoàn toàn |
| destination-out | Hiển thị ảnh đích nằm ngoài ảnh nguồn. Chỉ có phần ảnh đích nằm ngoài ảnh nguồn được hiển thị, ảnh nguồn mờ hoàn toàn |
| lighter | Hiển thị cả ảnh nguồn và ảnh đích |
| copy | Hiển thị ảnh nguồn. Ảnh đích bị bỏ qua |
| xor | Hiển thị cả Ảnh nguồn và ảnh đích, phần giao nhau sẽ bị xóa đi |
Ví dụ
Hiển thị tất cả giá trị của thuộc tính globalCompositeOperation
Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <head> <style> canvas { border: 1px solid #d3d3d3; margin-right: 10px; margin-bottom: 20px; } </style> </head> <body> <script> var gco = new Array(); gco.push("source-atop"); gco.push("source-in"); gco.push("source-out"); gco.push("source-over"); gco.push("destination-atop"); gco.push("destination-in"); gco.push("destination-out"); gco.push("destination-over"); gco.push("lighter"); gco.push("copy"); gco.push("xor"); var n; for (n = 0; n < gco.length; n++) { document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>"); var c = document.createElement("canvas"); c.awidth = 120; c.height = 100; document.getElementById("p_" + n).appendChild(c); var ctx = c.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(10, 10, 50, 50); ctx.globalCompositeOperation = gco[n]; ctx.beginPath(); ctx.fillStyle = "red"; ctx.arc(50, 50, 30, 0, 2 * Math.PI); ctx.fill(); document.write("</div>"); } </script> </body> </html> |
Demo
