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>

在eventlisteners（）

1 个答案: