Запуск js-скрипта

Question

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

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

Answer 1

Вот пример кнопки с 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>

БЛОГ НА HUSL

Запуск js-скрипта

Ответы (1 шт):