[英]How canvas could be resizing with window?
I've just started to learn web development and i'm stick with an issue.我刚刚开始学习 web 开发,我坚持一个问题。
I try to use one canvas as a header site.我尝试使用一个 canvas 作为 header 站点。 I'm trying to use this one:我正在尝试使用这个:
https://codepen.io/towc/pen/mJzOWJ https://codepen.io/towc/pen/mJzOWJ
But unfortunately, even if the canvas is in a div, when i resize my window the canvas don't work propely and the canvas become taller than before. But unfortunately, even if the canvas is in a div, when i resize my window the canvas don't work propely and the canvas become taller than before.
I've already try to put the canvas in a the proper div, and initialize the height=100% and width=100%我已经尝试将 canvas 放在适当的 div 中,并初始化 height=100% 和 width=100%
Here is the code of my header这是我的 header 的代码
<header class="masthead">
<canvas id="c" height="100%" width="100%"></canvas>
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>My website</h1>
<span class="subheading">Etudiant ingénieur <br> Artificial Intelligence</span>
</div>
</div>
</div>
</div>
</header>
header.masthead {
margin-bottom: 30px;
background: no-repeat center center;
background-color: #868e96;
background-attachment: scroll;
position: relative;
background-size: cover;
}
header.masthead .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #212529;
opacity: 0.5;
}
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
padding: 100px 0 50px;
color: white;
}
@media only screen and (min-width: 768px) {
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
padding: 50px 0;
}
}
header.masthead .page-heading,
header.masthead .site-heading {
text-align: center;
}
So I would like to resize the canvas I showed you before when I resize the window and be at the size of the banner.因此,当我调整 window 的大小时,我想调整 canvas 的大小并保持横幅的大小。
Thanks for your advice, i'm pretty sure it is easy to manage.感谢您的建议,我很确定这很容易管理。
I finaly fixed it.我终于修好了。
I did this on my script written in javascript我在用 javascript 编写的脚本上做了这个
var canvas = document.querySelector('c');
fitToContainer(canvas);
function fitToContainer(canvas){
c.style.width ='100%';
c.style.height='100%';
c.width = c.offsetWidth;
c.height = c.offsetHeight;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.