2 / 0 / 2
Регистрация: 14.04.2020
Сообщений: 51
1

Canvas заслоняется другими блоками

27.03.2023, 18:54. Показов 597. Ответов 1

Author24 — интернет-сервис помощи студентам
Здравствуйте! Подскажите, как сделать так, чтобы canvas стал фоном <body> или хотя бы одного <div>. Данный <div> имеет такие параметры в классе mainbd:
HTML5
1
2
3
background-color: rgba(28, 26, 26, 0.7);
width: 80%;
margin: auto;
И я хочу, чтобы справа и слева от него был canvas. Не хочется делать вручную ещё два блока - после div с классом mainbd пойдут другие дивы. Не подскажете, как этот canvas на весь body растянуть и чтобы его было видно из-зы других div, если те будут полупрозрачными?
Мой canvas написан только на js, его подключаю только посредством id и не использую для него стили css.
Попробовал
Javascript
1
document.body.style.backgroundImage = `url(${canvas.toDataURL()}`;
не получилось, он продублировался несколько раз по длине страницы, но ещё проблема в том, что анимация в canvas перестала работать.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
27.03.2023, 18:54
Ответы с готовыми решениями:

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

Обтекание блока другими блоками
Добрый день! Пожалуйста, помогите решить задачку средствами CSS, желательна максимальная...

Не удается соединить блок Входа (Intport) с другими блоками, почему?
Всем привет! Ребята, столкнулся с проблемой. Нужно в Матлабе создать подсистему, для этого нужно...

Блок в центре других блоков и его связи с другими блоками
Сделана вот такая конструкция &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;block&quot;&gt; &lt;div...

как в canvas или другими способами HTML5 создать кнопку с эффектами?
Эффекты внутренняя тень, внутреннее свечение. Пример кнопки в картинке.

1
1756 / 911 / 373
Регистрация: 26.11.2014
Сообщений: 1,859
Записей в блоге: 1
28.03.2023, 10:11 2
Вариант...
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
  <body>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        display: grid;
        place-content: center;
      }
      canvas {
        background: teal;
      }
      .text {
        width: 50%;
        padding: 2rem;
        background: hsl(0 100% 84% / 0.5);
        background: linear-gradient(
          135deg,
          hsl(0 100% 84% / 1),
          hsl(0 100% 84% / 0.5)
        );
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
 
    <canvas></canvas>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, voluptates.
      Doloremque earum praesentium inventore delectus aliquam eaque magni
      adipisci autem harum, commodi ab sed voluptatum nam. Incidunt deleniti
      eius mollitia?
    </div>
    <script>
      const canvas = document.querySelector("canvas");
 
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      const ctx = canvas.getContext("2d");
      ctx.font = "100px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText("Hello World!", canvas.width / 2, canvas.height / 2);
 
      window.addEventListener("resize", () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        ctx.font = "100px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("Hello World!", canvas.width / 2, canvas.height / 2);
      });
    </script>
  </body>
Миниатюры
Canvas заслоняется другими блоками  
0
28.03.2023, 10:11
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.03.2023, 10:11
Помогаю со студенческими работами здесь

Как разбить в админке страницу со всеми блоками на несколько, чтобы управлять блоками постранично
Здравствуйте, подскажите, пожалуйста, как можно в Drupal разбить административную страницу всех...

Можно ли сказать, что контекст canvas - объект, определяющий свойства canvas?
Можно ли сказать, что контекст canvas - объект, определяющий свойства canvas?

Canvas html5, как разместить черный пискель в центре canvas'a?
как разместить черный пискель в центре canvas'a?

Можно ли одной процедурой рисовать на Image.Canvas и Printer.Canvas
Здравствуйте, пожалуйста, подскажите можно ли одной процедурой рисовать на Image.Canvas и...

Canvas JS столкновения, Как придать твёрдость объекту на HTML5 Canvas
Всем привет! Недавно начал изучать HTML5 Canvas, столкнулся с проблемой... Мне надо сделать...

построить функцию y=kx+b (линейная функция) с помощью Vcart или canvas (form.canvas)
Надо построить функцию y=kx+b (линейная функция) с помощью Vcart или canvas (form.canvas)


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru