HTML5 kanvas yeniden boyutlandırılıyor

Kanvas elemanını yeniden boyutlandırmak istiyorum, böylece ebeveyne uyuyorsa, <body> ("tam ekran") veya örneğin olsun. Bu benim girişimim:HTML5 kanvas yeniden boyutlandırılıyor

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

Bazı nedenlerden dolayı, tuval büyümeyi durdurmuyor! Belki client* doğru parametreler değildir?

burada eylem kodu bakınız: http://jsfiddle.net/ARKVD/24/

kaynak

2011-12-24 Giovanni Funchal

Kanvas 155px yüksekse, gövde 160px yüksekliğindedir, bu da tuvalin her seferinde 5px 'artmaya devam etmesini sağlar (gövde her büyüdüğünde gövde 5 pikseldir). Neden oldu bilmiyorum, çünkü tüm marjları/paddings'i 0px'de ayarladınız. (Bu Chrome'da.) – pimvdb

Linux/Firefox'ta teşekkürler, ya 4px veya 3px ofsetimi görüyorum (penceremin maksimum olup olmadığına bağlı olarak) ... can sıkıcı! –

Tuhaf olan şey, eğer tuval 0px'lik bir yüksekliğe ayarlanmışsa, gövde "20px" yüksekliğindedir. Gövde gerçekten kaldırılırsa gövde yalnızca 0px değerine düşer. – pimvdb

kolay şey yapmak her zaman kendi div tuval tutmaktır.

Bu divanda bulunacak tek şey tuvaldir.

Ardından, istediğiniz şekilde div boyutunu yeniden boyutlandırmak için CSS'yi kullanabilirsiniz. Vücudun kadar büyük mü istiyorsun? width: 100% numarasını verin.

Sonra hep haklı yapabilirsiniz:

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

Eğer vücut div doğrudan ebeveyn olduğunda o anda bakıyor olduğunuz tuhaf sorunlar hakkında endişelenmenize gerek olmayacaktır Bunu yaparsanız.

kaynak

2011-12-24 19:01:30

Neden vücudun neden işe yaramadığını açıklayabilir misiniz? –

Eğer bir div sahip olduğu kadar büyük olmasını istiyorsanız, CSS ile genişlik ve yükseklik belirtebilirsiniz (% 100 genişlik vb. Gibi). % 100 genişlik mutlaka vücudun "clientWidth" kadar büyük olmasını gerektirmez. Bunun yerine, CSS spesifikasyonunda denilen "içeren blok" kadar büyüklükte olur ki bu, vücudun clientWidth ve Height'ından farklıdır (daha küçük). Bununla başlayın: http://jsfiddle.net/9FyNZ/ –

Teşekkürler! Bu yaşadığım çok sinir bozucu bir sorunu çözdü. – Brad

Aynı sorunu yaşamaya devam ettim ve etrafta çalışmak için bulabildiğim tek yol, tuval yüksekliğini parentHeight - 1 olarak ayarlamaktı. Bu, CEF kullanıyordu. this keman ben parentHeight olarak ayarlayın zorunda - 5.

canvasNode.height = div.clientHeight - 5;

kaynak

2014-09-29 10:04:45 Sam

Sen ebeveyn düğüm ve çocuk düğüm arasındaki döngüsel bağımlılığı kırarak sorunun geçici çözümü olabilir. DOM öğelerinin boyut dağılımı yalnızca aşağıdan yukarıya doğru yayılmalıdır (ebeveynten çocuğa). Sen alt öğe (tuval) Bu ebeveyn bağımsızdır, kendi belge akışına koyar

canvasNode.style.position = 'absolute';

ayarlayarak ebeveynin boyutunu etkilemez sağlayabilirsiniz.

kaynak

2017-07-25 21:19:05 Imran

Ben en temiz yaklaşım sadece bunu yeniden boyutlandırma üzerine olması gerekiyor ne kadar büyük tuval eleman "hatırlatmak" için olduğunu tespit ettik:

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

bu durumda ayar yüksekliği orada sadece 4 korumaktır : 3 oran. İsterseniz, elbette,% 100 yapabilirsiniz.

kaynak

2017-11-09 23:24:07

HTML5 kanvas yeniden boyutlandırılıyor

cevap

İlgili konular