如何使HTML5画布适合动态父/柔性框容器 [英] How to make a HTML5 canvas fit dynamic parent/flex box container

问题描述

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

Is there a way I can create a canvas inside a dynamic re-sizing flex-box container?

最好仅使用CSS解决方案，但我认为重绘需要JavaScript吗?

Preferably a CSS only solution but I think JavaScript is required for redraw?

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

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.

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

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:

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:

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/

JS fiddle showing the issue: https://jsfiddle.net/h2v1w0a1/

推荐答案

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

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.

您将希望使画布中的内容尽可能清晰地呈现，并且唯一的方法是使用JavaScript调整大小以适应父对象，并避免使用CSS(后者适合于打印等事情，或在需要时使用)视网膜分辨率").

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").

要获取以像素为单位的父容器大小，可以使用 getComputedStyle()(请参见下面的更新):

To get the parent container size in pixels you can use getComputedStyle() (see update below):

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方面存在一些问题)

(Note: Chrome seem to have some issues with computed flex at the moment)

更新

这是一种更简单的方法:

Here's a simpler way:

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

小提琴

Fiddle

这篇关于如何使HTML5画布适合动态父/柔性框容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！