0

Как при нажатии на кнопку добавить элемен canvas js и при нажатии на вторую кнопку удалить последний добавленый?

1
  • Надо теорию подтянуть. Элемент Canvas здесь понимается как Html Element Canvas. Canvas JS? Скорее всего тот же элемент, к которому имеется программный доступ посредством языка JS. Cavas API, WebGL?
    – Leonid
    24 мар 2020 в 5:01

3 ответа 3

4

Что-то такое:

let count = 1;
let ctx = canvas.getContext('2d');

stack(0);

function stack(dir) {
  count = Math.max(1, Math.min(count+dir, 10));
  ctx.clearRect(0, 0, 300, 150);
  for (let i = 1; i < count+1; i++) 
    ctx.fillRect(125, 150 - 15*i, 50, 10);
}
<button onclick="stack(-1)">pop</button>
<button onclick="stack(+1)">push</button>
<br>
<canvas id="canvas"></canvas>

1
  • 1
    Это реально правильный стек!
    – Leonid
    24 мар 2020 в 8:08
3

function addCanvas() {
  var c = document.createElement("canvas");
  document.body.appendChild(c);
}

function removeCanvas() {
  var c = document.querySelectorAll("canvas");
  if (c.length) {
    c[c.length - 1].parentNode.removeChild(c[c.length - 1]);
  }
}
canvas {
  width:200px;
  height:100px;
  border:1px solid black;
  margin:2px;
}
<button onclick="addCanvas()">Add canvas</button>
<button onclick="removeCanvas()">Remove canvas</button>
<br/>

1
  • 1
    Это же продолжение вопроса про стек) Скорее всего толку не будет от добавленного HTMLElement canvas, речь идёт о добавлении некого Элемента на Канву.
    – Leonid
    24 мар 2020 в 4:55
0

Некоторый код, чтобы было понятно, как работает Canvas. Это не тег HTML, куда можно добавлять и удалять элементы. Это холст, на который рисуются объекты (stroke - контур объекта, fill - заливка объекта, clear - очистка зоны объекта). Каждый последующий объект рисуется поверх остальных.

Учитывая, что clear всего лишь заливает объект базовым цветом холста (по умолчанию белым), то остается всего два метода отрисовки в 2d: stroke(), fill(). Поэтому для добавления любых объектов нужно задать strokeStyle или fillStyle, а также задать форму и вызвать метод fill() контекста.

Если что-то добавляется или меняется (обычно) задают анимацию: полную перерисовку всего Canvas 30-60 раз в секунду. Если сцена не изменилась, то браузер и не будет напрягаться.

Лучше всего какие-то элементы сцены группировать по слоям: разным элементам Canvas, послойно наложенных друг на друга с разными z-index. Перерисовывать отдельные слои, в которых произошли изменения и все последующие (с бОльшим z-index).

const OPT = {    // Выносим основные опции в отдельный глобальный объект
  item_num : 4,    // базовое кол-во элементов в стеке
  item_wid : 60,   // ширина элемента
  stack_gap : 5,   // расстояние между элементами стека
  canvas_wid : 150, // ширина canvas
  canvas_hei : 150, // высота canvas
  canvas_margin : 20 // отступы от края canvas
}

const CNV = document.getElementById('stack'); // Получаем доступ к canvas
const CTX = CNV.getContext('2d');             // Получаем 2d контекст canvas

const WID = CNV.width = OPT.canvas_wid; // Задаем ширину canvas и инициализируем WID для более простого доступа в программе к этому параметру
const HEI = CNV.height = OPT.canvas_hei; // Задаем высоту canvas
const ITH = (HEI - OPT.canvas_margin*2 - OPT.stack_gap*OPT.item_num) /(OPT.item_num + 1); // Рассчитываем высоту отдельного элемента стека, оставляя место для вставки (проверки нет)

CTX.fillStyle = '#e0e0e0'; // Задаем стиль заливки контекста
CTX.fillRect(0,0,WID,HEI); // Заливаем прямоугольник на всю высоту и ширину Canvas

CTX.fillStyle = 'red'; // Меняем стиль заливки контекста
buildStack(); // вызываем функцию построения базовой части стека


function buildStack(){  // Функция построения стека без добавления последнего элемента

for(let i=0; i < OPT.item_num; i++){
  	drawItem(i);
  }
}


function drawItem(i, del){ // Функция добавляет заливает i-элемент, или очищает зону под ним
  let startX = (WID - OPT.item_wid)/2;
  let startY = HEI - OPT.canvas_margin - i*(ITH + OPT.stack_gap);
  if(!del) CTX.fillRect(startX, startY, OPT.item_wid, -ITH );
  else CTX.clearRect(startX, startY, OPT.item_wid, -ITH );

}

addToStack = () => {  // "Добавляем" последний элемент ( del = false)
drawItem(OPT.item_num, false);
}

removeFromStack = () => { // "Удаляем" последний элемент ( del = true)
drawItem(OPT.item_num, true);
}

cleanAll = () => {
 CTX.fillStyle = '#e0e0e0'; // Задаем стиль заливки контекста
 CTX.fillRect(0,0,WID,HEI);
 CTX.fillStyle = 'red';
}

undoAll = () => {
 cleanAll();
 buildStack();
}
<button id="add" onclick="addToStack()">ДОБАВИТЬ</button>
<button id="remove" onclick="removeFromStack()">УДАЛИТЬ</button>
<button id="remove" onclick="cleanAll()">ОЧИСТИТЬ</button>
<button id="remove" onclick="undoAll()">ОТМЕНИТЬ ВСЁ</button>
<hr>
<canvas id="stack"></canvas>

4
  • Нельзя чтобы при удалении все удалилось? 24 мар 2020 в 12:18
  • Конечно можно. Просто очистить экран можно.
    – Leonid
    24 мар 2020 в 12:22
  • Нет я имел ввиду что при каждом нажатии удалить удалялся последний элемен и при добовлении добавлялся 24 мар 2020 в 13:05
  • Есть же ответ выше.
    – Leonid
    24 мар 2020 в 13:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.