如何在画布中制作多个元素

Question

我试图在相同高度的画布上显示多个管道，但是即使使用了for循环后，它也显示了单个管道，但并没有很多

<script>
    var tryCanvas = document.getElementById("myCanvas");
    var c = tryCanvas.getContext("2d");
    var myCall = [];

    function Squares() {

        for(var i =0; i < 10; i++){
            this.x = Math.random()* tryCanvas.clientWidth;
            this.y = 0;
            this.w = 20;
            this.h = 60;
            this.counter = 0;
            this.draw = function() {
                c.beginPath();
                c.rect(this.x, this.y, this.w, this.h)
                c.fill();
            }
    }

        this.update = function() {
            if(this.x < 0){
                this.x = 0;
            }
            this.x -= 1;
            this.draw();
        }
    }

    var holder = new Squares;

    setInterval(callFun, 10);

       function callFun() {
        c.clearRect(0,0,tryCanvas.clientWidth, tryCanvas.clientHeight);
        holder.update();    
       }
 </script>

如果我将构造函数推入数组中，则它在画布上不显示任何内容，而在控制台中，它给出的是undefined或NaN。 但是，如果我不使用“ this”就这样做会产生rects的数量。 我在这里做错了什么？

Answer 1

更新后可沿屏幕移动条形图

请参阅此工作示例： https : //codepen.io/bkfarns/pen/braWQB?editors=1010

仅使用for循环的最后一次迭代中的值创建this.draw。

同样作为一个侧节点，通常代替new Squares调用构造函数，例如new Squares() 。 当您调用构造函数时，您正在调用一个方法。

但是我认为以下代码可以解决您的问题。 试试看：

<body>
  <canvas id="myCanvas"/>
</body>

<script>
    var tryCanvas = document.getElementById("myCanvas");
    var c = tryCanvas.getContext("2d");
    var myCall = [];

    function Squares() {

        this.draw = function(xOffset) {

          for(var i =0; i < 10; i++){

            this.x = (i * xOffset) + (5*i)//Math.random()* tryCanvas.clientWidth;
            this.y = 0;
            this.w = 20;
            this.h = 60;
            c.beginPath();
            c.rect(this.x, this.y, this.w, this.h)
            c.fill();
          }
        }
    }

    var holder = new Squares();

    var xOffset = 20;
    setInterval(function() {
      c.clearRect(0,0,tryCanvas.clientWidth, tryCanvas.clientHeight);
      holder.draw(xOffset)
      xOffset--;
    }, 1000)


 </script>

如何在画布中制作多个元素

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-08-17 06:26:53

如何在画布中制作多个元素

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-08-17 06:26:53

解决方案1
2 已采纳 2017-08-17 06:26:53