Как изменить содержимое canvas?

107

04 апреля 2021, 06:50

На сайте есть светлая и темная тема. Для каждой срабатывает свой фон. Для светлой используется Trianglify.js и подобный метод вставки(фиксированный, не создавать через js)

<canvas id='c' style='margin-top:52px;margin-bottom:52px;height: calc(100% - 104px);width: 100%;background:#282c34;z-index: -50;'></canvas>

и простейший механизм вставки

  var pattern = Trianglify({
        width: window.innerWidth,
        height: window.innerHeight
    });

как поместить изображение pattern в canvas (без добавления ребенка)

Answer 1

Надо было чуть чуть почитать доки

function newTheme(){ 
  var pattern = Trianglify({ 
    width: window.innerWidth, 
    height: window.innerHeight 
  }); 
 
  pattern.canvas(document.getElementById('c')); 
} 
 
newTheme();

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script> 
<button onclick="newTheme()">new theme</button> 
<canvas id='c' style='margin-top:52px;margin-bottom:52px;height: calc(100% - 104px);width: 100%;background:#282c34;z-index: -50;'></canvas>

Answer 2

Какой-то у вас не правильный canvas. Перепишите инлайновый стили в нормальный css подключаемый фаил.

#c { 
  margin-top: 52px; 
  margin-bottom: 52px; 
  height: calc(100% - 104px); 
  width: 100%; 
  background: #282c34; 
  z-index: -50; 
} 
 
#c.activeLight{ 
 background: #f00; 
}

<canvas class="activeLight" id="c"></canvas>

Если я правильно понял задачу, то это самое простое решение

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Странный казус в работе getline()

При i = 0 getline не работает, ввод запрашивает на 1 раз меньше чем требуетсяВ чём проблема работы getline() ?

111

c++

Как изменить содержимое canvas?

Странный казус в работе getline()

Логические операции С++

Интерактивное SVG колесо

Ошибка ASP.Net Core