问题描述
我想调整画布元素的大小，以便适合其父元素，无论是 <body> (全屏")还是一些 <div>例如.这是我的尝试:
I want to resize the canvas element so that if fits its parent, whether it's <body> ("full-screen") or some <div> for instance. This is my attempt:
// called at each frame
function update() {
var canvasNode = document.getElementById('mycanvas');
canvasNode.width = canvasNode.parentNode.clientWidth;
canvasNode.height = canvasNode.parentNode.clientHeight;
}
由于某种原因，画布不会停止增长！也许 client* 不是正确的参数?
For some reason, the canvas doesn't stop growing! Maybe client* aren't the right parameters?
在此处查看实际代码:http://jsfiddle.net/ARKVD/24/
推荐答案
最简单的做法是始终将画布保留在自己的 div 中.
The easiest thing to do is to always keep the canvas in its own div.
这个 div 中唯一存在的就是画布.
The only thing that will ever be in this div is the canvas.
然后你可以使用 CSS 来调整你想要的 div 的大小.你想要它和身体一样大吗?给 div width: 100%.
Then you can use CSS to resize the div however you want. You want it as large as the body? Give the div width: 100%.
那么你总是可以正确地做:
Then you can always rightfully do:
canvas.width = theDiv.clientWidth;
canvas.height = theDiv.clientHeight;
如果您这样做，您将不必担心当 body 是 div 的直接父级时您当前面临的奇怪问题.
If you do this you won't have to worry about the weird issues that you're currently facing when the body is the direct parent of the div.
这篇关于HTML5 画布调整为父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)