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

141
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>

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

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

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

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

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

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

Недавно начал изучать С++Выполняю упражнение на перевод температур по шкалам

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

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

Есть вот такое колесо:

 212
Ошибка ASP.Net Core
c#

Ошибка ASP.Net Core

Всем привет, возникла ошибкаНа сколько я понимаю возникает исключение при попытке доступа к члену типа, значение которого равно null

 162