Tôi đang trong quá trình tạo trò chơi bằng Javascript và phần tử canvas html5 thay thế cho Flash. Câu hỏi của tôi là: có bất kỳ mã nào tôi có thể sử dụng để ẩn con trỏ chuột/con trỏ khi nó đi trong canvas không? Trợ giúp được đánh giá cao!Ẩn con trỏ chuột khi nó nằm trong HTML5 Canvas Javascript
Tôi không nghĩ bạn cần Javascript cho việc này, bạn chỉ có thể sử dụng CSS. Gán canvas của bạn một div id/lớp, và sau đó sử dụng này trong mẫu CSS của bạn:
* {cursor: none;}
Ah! Cảm ơn nhiều! Tôi sẽ thử điều đó! – Chris
Đây là một phần của [CSS3] (http://dev.w3.org/csswg/css3-ui/#cursor) nhưng không phải là một phần của [CSS2] (http://www.w3.org/TR/CSS21/ ui.html # propdef-cursor). – Shi
Điều này không hoạt động trên Firefox mới nhất trên Linux. Con trỏ bị ẩn cho phần còn lại của trang nhưng vẫn hiển thị trên canvas. –
Bạn có thể sử dụng javascript để thao tác kiểu con trỏ. Mã số:
<div id="canvas_div_no_cursor">
<!-- canvas here -->
</div>
<script type="text/javascript">
document.getElementById('canvas_div_no_cursor').style.cursor = "none";
</script>
Tôi đã thử điều này, nhưng nó chỉ có vẻ làm việc trong firefox. Ngoài ra, tôi không thể có được CSS để làm việc vì lý do nào đó, tôi tin rằng nó cũng chỉ hoạt động trong firefox. Có ai biết nếu có một giải pháp cross-trình duyệt? Tôi đánh giá cao tất cả sự giúp đỡ của bạn. – Chris
@Chris: Nó hoạt động trong IE9 và Firefox 4.0 như tôi đã thử nghiệm. Opera 11 và Google Chrome không ẩn con trỏ. (Có thể một số cài đặt bảo mật hạn chế điều này). – VIK
@Chris Google chrome đang ẩn con trỏ cho tôi khi jQuery được sử dụng '$ ('# canvas_div_no_cursor'). Css ('cursor', 'none') –
Cách đơn giản nhất (trên trình duyệt hiện đại) là đặt con trỏ thành none trên canvas.
Nếu vải của bạn được tạo ra dưới dạng HTML, làm:
<canvas id="canvas" style="cursor: none;"></canvas>
tôi sẽ ủng hộ này trong một phong cách-sheet bởi vì bạn muốn đảm bảo giá trị con trỏ không phải là quá ridden.
Nếu vải của bạn được tạo ra trong JavaScript, làm:
const canvas = document.createElement('canvas');
canvas.style.cursor = 'none';
document.body.appendChild(canvas);
liên quan (đáng xấu hổ cắm): http://stackoverflow.com/questions/1071363/is-it-possible-to-hide-the- cursor-in-a-site-using-css-or-javascript –
@Lucas Jones Tôi sắp đăng liên kết đó, rõ ràng là bạn có thể tìm thấy nó nhanh hơn một chút. – qw3n
@ qw3n: Chỉ khi tôi vừa trả lời nhận xét về câu trả lời của tôi ở đó, vì vậy, 'trong hộp thư đến của StackExchange ™ SuperCollider MultiDropdown ™ của tôi. –