Có cách nào tôi có thể tạo canvas HTML5 làm nền của trang web tôi đang tạo và đặt tất cả các phần tử trên đầu trang của nó hay không.Tạo <canvas> nền của tài liệu html
Vì vậy, nó hoạt động như <body>?
Tôi đã thử làm điều này với chỉ mục z và định vị các phần tử ở trên cùng, nhưng sau đó chúng có thể nhấp hoặc có thể tập trung. Tôi cần chúng vẫn hoạt động, nhưng canvas cũng có thể nhấp được chỉ trong nền và không thể nhấp vào khi có các phần tử trên đó.
Chỉ cần đặt z-index thành -1 của <canvas>. Nếu canvas của bạn được bao phủ bởi vùng chứa trên cùng, hãy mô phỏng sự kiện tùy chỉnh bằng cách sử dụng createEvent. [1]
Demo: http://jsfiddle.net/DerekL/uw5XU/
var canvas = $("canvas"), //jQuery selector, similar to querySelectorAll()
//...
function simulate(e) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mousemove", true, true, window,
0, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null);
canvas[0].dispatchEvent(evt);
}
$("body > *").each(function() {
this.addEventListener("mousemove", simulate);
});
Ah, okay . Tôi nghĩ những gì tôi đã bỏ lỡ là các sự kiện tùy chỉnh. Bạn có thể chỉ cho tôi một ví dụ về cách sử dụng các sự kiện tùy chỉnh để mô phỏng cách nhấp vào canvas khi có thực sự là vùng chứa ở trên cùng không? – JayGatz
@JayGatz - Xem [ví dụ] (http://jsfiddle.net/DerekL/uw5XU/) (cập nhật.) –
Nếu lớp trên cùng sẽ ẩn với tương tác chuột, hãy đặt 'pointer-events: none'. – alex
Chắc chắn điều đó có thể thực hiện được với z-index, hầu hết có lẽ canvas sẽ không thể nhấp được vì bạn đang làm việc với vùng chứa ở phía trên nó. Vì vậy, ngay cả khi dường như không có phần tử nào thì vùng chứa vẫn ở đó ngăn bạn nhấp vào canvas.
Xem thêm: https://stackoverflow.com/questions/3397334/use-canvas-as-a-css-background/43105694#43105694 –