javascript 如何使 HTML5 画布适合动态父/弹性盒容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30229536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a HTML5 canvas fit dynamic parent/flex box container
提问by Xela
Is there a way I can create a canvas inside a dynamic re-sizing flex-box container?
有没有办法可以在动态调整大小的 flex-box 容器中创建画布？
Preferably a CSS only solution but I think JavaScript is required for redraw?
最好是仅 CSS 的解决方案，但我认为重绘需要 JavaScript？
I think one solution could be to listen to the re-sizing event and then scale the canvas to meet the size of the flex box parent then force a redraw but I would preferably like to use as much CSS as possible or a more clean/less code solution.
我认为一种解决方案可能是监听重新调整大小事件，然后缩放画布以满足 flex 框父级的大小，然后强制重绘，但我最好尽可能多地使用 CSS 或更干净/更少代码解决方案。
The current approach is CSS based where the canvas is re-sized according to the parent flex box element. The graphics are blurred, re positioned and overflowed from the canvas in the below screenshot.
当前的方法是基于 CSS 的，其中画布根据父弹性框元素重新调整大小。在下面的屏幕截图中，图形被模糊、重新定位并从画布溢出。
CSS:
CSS：
html,body{
margin:0;
width:100%;
height:100%;
}
body{
display:flex;
flex-direction:column;
}
header{
width:100%;
height:40px;
background-color:red;
}
main{
display:flex;
flex: 1 1 auto;
border: 1px solid blue;
width:80vw;
}
canvas{
flex: 1 1 auto;
background-color:black;
}
HTML:
HTML：
<header>
</header>
<main>
<canvas id="stage"></canvas>
</main>
Javascript:
Javascript：
$( document ).ready(function() {
var ctx = $("#stage")[0].getContext("2d");
ctx.strokeStyle="#FFFFFF";
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.stroke();
});
JS fiddle showing the issue: https://jsfiddle.net/h2v1w0a1/
JS小提琴显示问题：https: //jsfiddle.net/h2v1w0a1/
回答by
Think of canvas as an image. If you scale it to a different size than the original it will appear blurry at some point, and perhaps early on depending on interpolation algorithm chosen by the browser. For canvas the browser tend to chose bi-linear over bi-cubic so there is higher risk of blur than with an actual image.
将画布视为图像。如果将其缩放到与原始大小不同的大小，它会在某些时候显得模糊，并且可能在早期取决于浏览器选择的插值算法。对于画布，浏览器倾向于选择双线性而不是双三次，因此与实际图像相比，模糊的风险更高。
You will want to have things in canvas rendered as sharp as possible and the only way to this is to adapt the size to the parent using JavaScript, and avoid CSS (the latter is good for things like printing, or when you need "retina resolutions").
您将希望画布中的内容尽可能清晰，唯一的方法是使用 JavaScript 使大小适应父级，并避免使用 CSS（后者适用于打印等内容，或者当您需要“视网膜分辨率”时”）。
To get the parent container size in pixels you can use getComputedStyle()(see update below):
要以像素为单位获取父容器大小，您可以使用getComputedStyle()（请参阅下面的更新）：
var parent = canvas.parentNode,
styles = getComputedStyle(parent),
w = parseInt(styles.getPropertyValue("width"), 10),
h = parseInt(styles.getPropertyValue("height"), 10);
canvas.width = w;
canvas.height = h;
(Note: Chrome seem to have some issues with computed flex at the moment)
（注意：Chrome 目前似乎在计算 flex 方面存在一些问题）
Update
更新
Here's a simpler way:
这是一个更简单的方法：
var rect = canvas.parentNode.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
