Question

我正在尝试在另一个画布上居中并将其居中。而且我希望它能做出响应，事实证明这比我想象的要难。

我有这个结构。

 <div class="photobooth"> // container
<div class="controls">    // just for the CTA btn
  <button class="cta" onClick="takePhoto()">Take Photo of your ID front please. Place the document  within the red border</button>
  <canvas class="blurPhoto" ></canvas> // the big canvas

//小画布，用户应将文档与该画布的边框一起放置 //隐藏，这只是获取画布数据的必要条件

<div class="strip">This goes to the database</div>

我想要的是一个全屏背景，并对其应用了模糊处理。在那个模糊画布的中心（或者它可以是视频元素，也许对视频元素应用模糊并居中放置画布会更好？），我想要一个清晰的画布来显示数据的准实时输入在视频元素上。

背景模糊和内部画布的红色边框指示用户放置文档的位置（整个应用程序是Revolut KYC UI的原始模拟器）。

现在，我不确定最好用CSS或JS进行设置。

video {
position:absolute;
top:0px;
z-index:-1;
width:10%;
height:10%;
filter :blur(1px);
display:none;
}

我在这里隐藏了视频，设置高度和宽度的百分比似乎无关紧要，Canvas上的JS还是会覆盖它。

由于我无法嵌套画布，因此在这里我不知道该怎么办。

.photo { // this is the small canvas which should be centered within the big one
 position:absolute;

 width:50vw;
 height:50vh;

 border:1px red solid;


}

.blurPhoto { big canvas
 position:relative;
 width:100vw;
 height:100vh;
 filter :blur(10px);
  border:1px red solid;

 }

现在，.photo画布的父元素是包装器div，将位置top：100％设置为我不想要的，所以我将其删除。

我在这里缓存2个画布：

const canvas = document.querySelector('.photo');
const ctx = canvas.getContext('2d');
const canvasBig = document.querySelector('.blurPhoto');
const ctx2 = canvasBig.getContext('2d');

这是相关的JS函数：

function paintToCanvas() {
const width = video.videoWidth;
const height = video.videoHeight;
canvas.width = width;
canvas.height = height;


return setInterval(() => {


 ctx.drawImage(video, 0,
    0, width, height);

 ctx2.drawImage(video, 0,
    0, width, height);  // this is overruled by the CSS set on it


 }, 16);
  }

所以，我该如何使用它。我是否应该仅将video元素用作背景？可以做出回应吗？

这是codepen链接，我更改了一些CSS，但仍然不满意。

https://codepen.io/damPop/pen/GwqxvM

Answer 1

取自https://css-tricks.com/centering-css-complete-guide/

将两个画布都放在容器div中，并使用％技巧来居中

.container {
    position: relative;
}
.photo   {
    position: absolute;
    width:50vw;
    height:50vh;
    border:1px red solid;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.blurPhoto { big canvas
    position:absolute;
    top: 0;
    left: 0;
    width:100vw;
    height:100vh;
    filter :blur(10px);
    border:1px red solid;
 }

2个画布，使用drawImage将一个画布居中放置在另一个画布中

1 个答案: