HTML5 canvas thay đổi kích thước thành parent

Tôi muốn đổi kích thước phần tử canvas sao cho phù hợp với bố cục của nó, cho dù đó là <body> ("toàn màn hình") hoặc một số <div> chẳng hạn. Đây là nỗ lực của tôi:HTML5 canvas thay đổi kích thước thành parent

// called at each frame 
function update() { 
    var canvasNode = document.getElementById('mycanvas'); 
    canvasNode.width = canvasNode.parentNode.clientWidth; 
    canvasNode.height = canvasNode.parentNode.clientHeight; 
}

Vì lý do nào đó, canvas không ngừng phát triển! Có lẽ client* không phải là thông số phù hợp?

Xem mã trong hành động ở đây: http://jsfiddle.net/ARKVD/24/

Nguồn

2011-12-24 Giovanni Funchal

Nếu canvas có chiều cao '155px', thân cao hơn 160px, khiến cho khung hình tiếp tục phát triển '5px' mỗi lần (phần thân có vẻ là' 5px' phía trước mỗi khi canvas mọc). Tôi không có ý tưởng tại sao, vì bạn đã thiết lập tất cả các lề/paddings trên '0px'. (Đây là trên Chrome.) – pimvdb

Cảm ơn, trên Linux/Firefox, tôi thấy có chênh lệch 4px hoặc 3px (tùy thuộc vào việc cửa sổ của tôi có được phóng to hay không) ... gây phiền nhiễu! –

Điều lạ lùng là, nếu canvas được đặt ở độ cao '0px', phần thân là cao 20px. Cơ thể chỉ sụp đổ thành '0px' nếu canvas thực sự bị xóa. – pimvdb

Điều dễ nhất để làm là luôn giữ cho vải trong div riêng của mình.

Điều duy nhất sẽ có trong div này là canvas.

Sau đó, bạn có thể sử dụng CSS để thay đổi kích thước div theo bất kỳ cách nào bạn muốn. Bạn muốn nó to như cơ thể? Tặng div width: 100%.

Sau đó, bạn có thể luôn luôn chính đáng làm:

canvas.width = theDiv.clientWidth; 
canvas.height = theDiv.clientHeight;

Nếu bạn làm điều này bạn sẽ không phải lo lắng về những vấn đề lạ mà bạn đang phải đối mặt với khi cơ thể là cha mẹ trực tiếp của div.

Nguồn

2011-12-24 19:01:30

Bạn có thể giải thích lý do tại sao nó không hoạt động với cơ thể (tức là tại sao cần DIV)? –

Nếu bạn muốn nó to bằng nội dung có div giúp dễ dàng hơn vì bạn có thể chỉ định chiều rộng và chiều cao bằng CSS (như chiều rộng 100%, v.v.). Chiều rộng 100% không nhất thiết làm cho nó lớn bằng 'clientWidth' của cơ thể. Thay vào đó nó làm cho nó lớn bằng "khối chứa" như được gọi trong thông số CSS, khác (nhỏ hơn) so với clientWidth và Chiều cao của thân. Bắt đầu với điều này: http://jsfiddle.net/9FyNZ/ –

Cảm ơn! Điều này giải quyết một vấn đề rất khó chịu tôi đã có. – Brad

Tôi đã tìm thấy vấn đề tương tự xảy ra và cách duy nhất tôi có thể tìm thấy để giải quyết nó là đặt chiều cao canvas thành parentHeight - 1. Điều này đang sử dụng CEF. Trong this fiddle tôi phải đặt nó vào parentHeight - 5.

canvasNode.height = div.clientHeight - 5;

Nguồn

2014-09-29 10:04:45 Sam

Bạn có thể workaround vấn đề bằng cách phá vỡ phụ thuộc vòng tròn giữa các nút cha và nút con. Việc phân bổ kích thước của các phần tử DOM chỉ nên truyền từ trên xuống (từ cha mẹ sang con). Bạn có thể đảm bảo rằng phần tử con (canvas) không ảnh hưởng đến kích thước của cha mẹ bằng cách đặt

canvasNode.style.position = 'absolute';

Điều này đặt nó vào dòng tài liệu riêng của nó độc lập với phụ huynh.

Nguồn

2017-07-25 21:19:05 Imran

Tôi đã phát hiện ra rằng cách tiếp cận sạch nhất chỉ đơn giản là "nhắc nhở" các yếu tố canvas lớn như thế nào đó là nghĩa vụ phải khi thay đổi kích thước:

window.onresize = function() { 
    canvas.style.width = '100%'; 
    canvas.height = canvas.width * .75; 
}

Chiều cao thiết trong trường hợp này là có chỉ đơn giản là duy trì một 4 : 3 tỷ lệ. Bạn có thể, tất nhiên, làm cho nó 100% là tốt nếu bạn mong muốn.

Nguồn

2017-11-09 23:24:07

HTML5 canvas thay đổi kích thước thành parent

Trả lời

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