0

Всем привет! Каким образом можно "запустить" js-скрипт (содержащий canvas) при определенном событии (например, клик на кнопку)? И так же его завершить.

Я пытался все это дело реализовать с помощью insertAdjacentHTML, который бы добавлял в корневом файле index.html - соответствующий html код, подключающий этот самый канвас, но это добавляет много проблем.

1
  • кнопка.addEventListener('click', функцияЗапускаЧегоВамТамНадо);
    – andreymal
    Commented 29 окт. 2020 в 13:54

1 ответ 1

0

Вот пример кнопки с canvas

var button = document.getElementsByClassName('mybutton')[0]; //Получить узел кнопки
var canvas = document.getElementsByClassName('mycanvas')[0]; //Получить узел кнопки
var ctx = canvas.getContext('2d');

function click() {
  ctx.fillRect(0, 0, 30, 30);
  ctx.fillRect(30, 30, 30, 30);
  ctx.fillRect(60, 60, 30, 30);
  ctx.fillRect(90, 90, 30, 30);
}

addEventListener('click', click); //Добавить обработчик событий
*{
  padding: 0px;
  margin: 0px;
}

.mycanvas{
  position: absolute;
  left: 0px;
  top: 0px;
}
.mybutton{
  position: absolute;
  right: 0px;
  top: 0px;
}
<button class='mybutton'>Click me!</button>
<canvas class='mycanvas'></canvas>

<button class='mybutton'>Click me</button>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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