javascript - 如何使HTML5 Canvas 适合动态父/柔性框容器

有没有办法在动态调整大小的flex-box容器内创建 Canvas ？

最好是仅CSS的解决方案，但我认为重绘需要JavaScript吗？

我认为一种解决方案可能是监听重新调整大小的事件，然后缩放 Canvas 以适应flex box父级的大小，然后强制重新绘制，但是我最好使用尽可能多的CSS或更干净/更少的CSS代码解决方案。

当前方法基于CSS，其中根据父级flex box元素调整 Canvas 的大小。在下面的屏幕截图中，图形被模糊，重新定位并从 Canvas 溢出。

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:

<header>
</header>
<main>
    <canvas id="stage"></canvas>
</main>

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提琴显示问题:https://jsfiddle.net/h2v1w0a1/

最佳答案

将 Canvas 视为图像。如果将其缩放到与原始尺寸不同的大小，则在某些时候可能会变得模糊，这可能取决于浏览器选择的插值算法。对于 Canvas ，浏览器倾向于选择双线性而不是双三次，因此比实际图像具有更高的模糊风险。

您将希望 Canvas 上的内容尽可能清晰地呈现，并且唯一的方法是使用JavaScript调整大小以适应父对象，并避免使用CSS(后者适合于打印之类的东西，或者在您需要“视网膜分辨率”时使用) ”)。

要获取以像素为单位的父容器大小，可以使用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;

Fiddle

(注意:Chrome目前似乎在计算出的Flex方面存在一些问题)

更新

这是一个更简单的方法:

var rect = canvas.parentNode.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;

Fiddle