Рисование объектов на холсте, созданных eventlisteners ()

Question

Я новичок в JavaScript, и мне трудно понять, как заставить холст взаимодействовать с вещами, которые я хочу сделать.

Я пытаюсь, чтобы моя кнопка HTML вне холста создала прямоугольник на холсте.Тогда я хочу, чтобы прямоугольник упал.У меня есть анимированный холст, у меня установлена ​​кнопка для создания прямоугольника по введенным пользователем координатам, но ... холст не будет его анимировать.

Он не упадет, как статически созданные прямоугольники.Я также борюсь с тем, как заставить мою кнопку каждый раз создавать новый прямоугольник вместо того, чтобы перерисовывать один и тот же?Надеюсь, кто-то может объяснить больше, чем просто дать мне код.Заранее спасибо.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
window.onload = addListeners;

function addListeners() {
  document.getElementById('b1').addEventListener('click',btn1,false);

  function btn1() {
    var inputx = document.getElementById("work").value;
    var inputy = document.getElementById("y").value;
    var inputs = document.getElementById("s").value;
    new Rectangle(inputx,inputy,inputs);
    // rec.x = inputx;
    //rec.y = inputy;
    //rec.s = inputs;
  }
}

var r2 = new Rectangle(500, 50, 50);
var rec = new Rectangle();  

//animate
function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0,0,1450,250);

  r2.draw();
  r2.update();
  rec.draw();
  rec.update();

}

код для прямоугольника:

function Rectangle(x,y,s){
this.x = x;
this.y = y;
this.s = s;

this.draw = function(){
    //console.log('fuck');
    ctx.fillStyle = "rgba(0,200,0,1)";
    ctx.fillRect(this.x,this.y,this.s,this.s);

}

this.update = function(){
    console.log(this.y);
    if((this.y + this.s) <= 250){
    this.y= this.y+2;
    }
}

}

Answer 1

Кнопка ничего не анимирует, так как метод animate не вызывался.Также в вашем коде, когда вы вызывали animate, он заканчивался бесконечным циклом, так как requestAnimationFrame будет продолжать многократно вызывать animate, поэтому я добавил условие вокруг requestAnimationFrame (animate), чтобы проверить высоту квадратов и прекратить его выполнение, когда оно достигнет дна,аналогично тому, что вы использовали в своей функции обновления.

Чтобы создать новый квадрат каждый раз, когда вы нажимаете кнопку, я переместил создание прямоугольников в функцию btn1.Если вы хотите сохранить старые квадраты при создании новых, вам нужно будет отслеживать их вне холста и перерисовывать их со всеми остальными анимациями.

Я догадался, как выглядит ваш HTML, но вы можетеЗапустите приведенный ниже код, он упадет на два квадрата, но учтите, что условие останова только на жестко закодированном.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
document.getElementById("b1").addEventListener("click", btn1, false);

var r2;
var rec;

function btn1() {
   var inputx = document.getElementById("work").value;
   var inputy = document.getElementById("y").value;
   var inputs = document.getElementById("s").value;
   r2 = new Rectangle(500, 50, 50);
   rec = new Rectangle(parseInt(inputx, 10), parseInt(inputy, 10), parseInt(inputs, 10));
   animate();
}
  
//animate
function animate() {
  if (r2.y + r2.s <= 400) {
    requestAnimationFrame(animate);
  }
  
  ctx.clearRect(0,0,1450,400);
  r2.draw();
  r2.update();
  rec.draw();
  rec.update();

}

function Rectangle(x,y,s){
this.x = x;
this.y = y;
this.s = s;

this.draw = function(){
    ctx.fillStyle = "rgba(0,200,0,1)";
    ctx.fillRect(this.x,this.y,this.s,this.s);
}

this.update = function(){
    this.y= this.y+2;
	}
}

<div>
  <input id='work'>
  <input id='y'>
  <input id='s'>
  <button id="b1"> Create Sqaure</button>
</div>
<canvas id="myCanvas" width=600 height=400></canvas>