Как можно изменить размер холста с помощью окна? - PullRequest
Новая
       39

Как можно изменить размер холста с помощью окна?

0 голосов
/ 01 октября 2019

Я только начал изучать веб-разработку, и у меня возникла проблема.

Я пытаюсь использовать один холст в качестве заголовка сайта. Я пытаюсь использовать это:

https://codepen.io/towc/pen/mJzOWJ

Но, к сожалению, даже если холст находится в div, когда я изменяю размер моего окна, холст не работает правильно ихолст стал выше, чем раньше.

Я уже пытался поместить холст в соответствующий div и инициализировать высоту = 100% и ширину = 100%

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>

CSS PART 

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;
}

Так что я бы хотел изменить размер холста, который я показывал вам ранее, когда я изменяю размер окна и соответствую размеру баннера.

Спасибо за ваш совет, я уверен, что им легко управлять.

1 Ответ

0 голосов
/ 04 октября 2019

Я наконец исправил это.

Я сделал это на своем скрипте, написанном на 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;
}
...