由 eventlisteners() 创建的 canvas 上的绘图对象

Question

我是 JavaScript 的新手，我很难理解如何让 canvas 与我想做的事情合作。

我正在尝试让我的 HTML 按钮位于 canvas 之外，在 canvas 上创建一个矩形。然后我想让矩形掉下来。我有 canvas 动画，我有按钮设置以在用户输入的坐标处创建一个矩形，但是...... canvas 不会动画它。

它不会像静态创建的矩形那样掉落。我也在为如何让我的按钮每次都创建一个新矩形而不是重新绘制同一个矩形而苦苦挣扎？希望有人能解释的不仅仅是给我代码。提前致谢。

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 函数中。如果您想在创建新方块的同时保留旧方块，则需要在 canvas 之外跟踪它们，并在每个动画中使用其他所有内容重新绘制它们。

我猜到了你的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>

由 eventlisteners() 创建的 canvas 上的绘图对象

Drawing objects on canvas created by eventlisteners()

javascript

canvas

dynamic

event-listener

html5-canvas