2012-07-02 40 views
10

Điều này cực kỳ thẳng về phía trước, nhưng tôi không thể hiểu tại sao nó lại gây ra các thanh cuộn. Đây là mã:Đặt chiều cao và chiều rộng của phần tử canvas thành window.innerHeight/innerWidth tạo thanh cuộn

CSS

body, canvas, html{margin:0;padding:0;border:0 none;} 
canvas{background:Black;} 

HTML

<html> 
    <head></head> 
    <body></body> 
</html>​ 

Javascript

var canvas = document.createElement("canvas"); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
document.getElementsByTagName("body")[0].appendChild(canvas);​​​​​​​ 

nên không chỉ này được gây ra vải để bắc qua chiều rộng và chiều cao o f cửa sổ có thể xem được? Dưới đây là một ví dụ JSFiddle: http://jsfiddle.net/TyJYH/

+0

Có thể là phần tử, phần thân và html có chứa, thêm lề hoặc đệm xung quanh canvas. Bạn có thể làm cho vị trí canvas tuyệt đối hoặc cố định., Hoặc đặt lề và đệm một cách rõ ràng thành 0. – kennebec

Trả lời

20

tôi giải quyết vấn đề này cùng bằng cách thiết lập thuộc tính display CSS của thẻ canvas để "khối".

canvas { 
    display: block; 
} 
+1

Cảm ơn bạn, tôi đã đọc rất nhiều câu hỏi trước khi tôi tìm thấy câu trả lời này. Giải pháp điên rồ nhất mà tôi tìm thấy là "vị trí: cố định" một hình ảnh trong suốt ở góc dưới cùng bên phải của cửa sổ và sử dụng nó để lấy số đo. Điều đó đã được chấp nhận và upvoted! –

+1

D'oh! Tôi chỉ nhận ra rằng khi '' là 'display: inline', nó có đường thẳng. –

0

này sẽ sửa chữa nó:

canvas { 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    top:0; 
} 
+1

Cảm ơn bạn đã nhập. Đây là một loại 'hack' nhiều hơn. Mối quan tâm của tôi là nhiều lý do tại sao chỉ định một phần tử có cùng chiều cao/chiều rộng vì cửa sổ có thể xem đang gây ra thanh cuộn mặc dù tôi chỉ định tất cả các phần tử được bật có lề, lề và đường viền bằng 0. – BenR

+0

http://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport. Ít 'hacky'. :-) – RhinoWalrus

Các vấn đề liên quan