HTML5 画布调整为父级

沃梦达教程前端问题

2022-01-01

HTML5 canvas resize to parent(HTML5 画布调整为父级)

本文介绍了HTML5 画布调整为父级的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想调整画布元素的大小，以便适合其父元素，无论是 <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 画布调整为父级

上一篇：消除 HTML5 画布元素下方的幽灵边距?

下一篇： twitter bootstrap modal——如何将数据传递给回调函数

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX