HTML5画布调整为父级
[英]HTML5 canvas resize to parent
问题描述
我想调整canvas元素的大小，以便如果适合它的父元素，例如它是<body> （“全屏”）还是某些<div> 。 这是我的尝试：
// called at each frame
function update() {
var canvasNode = document.getElementById('mycanvas');
canvasNode.width = canvasNode.parentNode.clientWidth;
canvasNode.height = canvasNode.parentNode.clientHeight;
}
出于某种原因，画布不会停止增长！ 也许client*不是正确的参数？
请参阅此处的代码： http ： //jsfiddle.net/ARKVD/24/
4 个解决方案
解决方案1
12 已采纳 2011-12-24 19:01:30
最简单的方法是始终将画布保留在自己的div中。
在这个div中唯一能做的就是画布。
然后你可以使用CSS来调整你想要的div。 你想要它和身体一样大吗？ 给div width: 100% 。
然后你可以随时正确地做：
canvas.width = theDiv.clientWidth;
canvas.height = theDiv.clientHeight;
如果你这样做，你将不必担心当身体是div的直接父母时你正面临的奇怪问题。
解决方案2
1 2017-11-09 23:24:07
我发现最干净的方法是简单地“提醒”画布元素在调整大小时应该有多大：
window.onresize = function () {
canvas.style.width = '100%';
canvas.height = canvas.width * .75;
}
在这种情况下，高度设置只需保持4：3的比例。 当然，如果你愿意，你也可以百分之百地做到这一点。
解决方案3
0 2014-09-29 10:04:45
我发现同样的问题发生了，我找到解决它的唯一方法是将画布高度设置为parentHeight - 1.这是使用CEF。 在这个小提琴中，我不得不将它设置为parentHeight - 5。
canvasNode.height = div.clientHeight - 5;
解决方案4
0 2017-07-25 21:19:05
您可以通过打破父节点和子节点之间的循环依赖关系来解决此问题。 DOM元素的大小分配应该只从上到下传播（从父元素传播到子元素）。 您可以通过设置确保子元素（画布）不会影响父元素的大小
canvasNode.style.position = 'absolute';
这将它放入自己独立于父级的文档流中。
HTML5 Canvas调整大小
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.