JS循环跳到屏幕上绘制的最后一个矩形（使用canvas）

Question

我对 OOP 和类还很陌生，但我正在试验它，同时尝试创建一种方法，在我的 HTML5 canvas 上随机创建三角形。

问题是我只能看到循环中生成的最后一个矩形。所有其他矩形都不会显示在屏幕上。这是我的代码。

class Animations{       
   constructor(){}
    //Background animation
    backgroundAnimation(x,y,height,width){
        this._x       = x;
        this._y       = y;
        this._height  = height;
        this._width   = width;
        let canvas    = document.querySelector('canvas');
        canvas.width  = window.innerWidth;
        canvas.height = window.innerHeight; 

        let c         = canvas.getContext('2d');
        c.beginPath;
        c.rect(this._x,this._y,this._width,this._height);
        c.fillStyle = 'blue';
        c.fill()
        c.stroke();
    }        
}

var animations = new Animations();

window.addEventListener("load", ()=>{
    for(let i=0;i<10;i++){
        let x = Math.floor(Math.random()*100+50);
        let y = Math.floor(Math.random()*100+50);
        animations.backgroundAnimation(x,y,20,20);
    }
});

<canvas></canvas>

如有任何帮助，我们将不胜感激。提前致谢:)

Answer 1

这里的问题是，每次在上面绘制时，您都在调整 canvas 的大小，这会导致它被清除。

见HTML5 responsive canvas: resizing the browser canvas draw disappear and Preventing Canvas Clear when Resizing Window

如果你真的想每次都调整它的大小，那么你必须想出一种方法来存储你在上面画的东西，然后重新画。

或者，如果不需要调整它的大小，那么只需创建一个 Animations class 的实例，然后在构造函数中调整大小：

<body>
  <canvas></canvas>
  <script>
    class Animations{
      constructor(){
        let canvas    = document.querySelector('canvas');
        canvas.width  = window.innerWidth;
        canvas.height = window.innerHeight;
        this.c = canvas.getContext('2d');
      }

      //Background animation
      backgroundAnimation(x,y,height,width){
        this._x       = x;
        this._y       = y;
        this._height  = height;
        this._width   = width;

        this.c.beginPath();
        this.c.rect(this._x,this._y,this._width,this._height);
        this.c.fillStyle = 'blue';
        this.c.fill();
        this.c.stroke();
      }
    }

    window.addEventListener("load", ()=>{
      const animations = new Animations();

      for(let i=0;i<10;i++){
        let x = Math.floor(Math.random()*100+50);
        let y = Math.floor(Math.random()*100+50);
        animations.backgroundAnimation(x,y,20,20);
      }});
  </script>
</body>

请注意，您可以将对上下文的引用存储为 class this.c 的属性，以便可以从 backgroundAnimation() 方法访问它。

JS循环跳到屏幕上绘制的最后一个矩形（使用canvas）

JS loop skips to last rectangle (using canvas) drawn on the screen

javascript

loops

canvas

rect