使用数组

Question

尝试通过将对象放入数组中来对画布上的对象进行动画处理，但它似乎无法正常工作。

目前只绘制了一个对象，但想到的是将更多的对象添加到画布中，因此就是数组。

我使用绘制和动画对象的函数是否有问题？

＆＃13;

＆＃13;

var draw;
	    function Canvas(canvas, ctx) {
	    	this.canvas = canvas;
	    	this.ctx = ctx;
	    }
	    function Direction(x, y) {
		     this.x = x;
		     this.y = y;
		    
	    }
	    function Measures(cW, cH, radius, hR, degree, dirX, dirY, degree) {
		     this.cW = cW;
		     this.cH = cH;
		     this.radius = radius;
		     this.hR = hR;
		     this.dirX = dirX;
		     this.dirY = dirY;
		     this.degree = degree;
	    }
		    
	    function Drawing(cW, cH, width, height, radius, hR, color) {
		    this.cW = canvas.width;
		    this.cH = canvas.height;
		    this.width = width;
	        this.height = height;
	        this.radius = height / 2;
	        this.hR = width - this.radius;  
	        this.color = color;
	 		
	        
	        
	        this.render = function() {
	        ctx.fillStyle = this.color;
		    ctx.strokeStyle = this.color; 
		    ctx.lineWidth = 1;
	       	ctx.save();
		    ctx.translate(this.x, this.y);
		    ctx.rotate(this.degree * Math.PI / 180);
		    ctx.translate(-this.x, -this.y);
		    ctx.beginPath();
		    ctx.moveTo(this.x, this.y);
		    ctx.lineTo(x + this.hR, this.y);
		    ctx.arc(this.x + this.hR, this.y + this.radius, this.radius, - Math.PI / 2, Math.PI / 2);
		    ctx.lineTo(this.x, this.y + height);
		    ctx.closePath();
		    ctx.fill();
		    ctx.stroke();
		    ctx.restore();
            }
	        
	        this.move = function(multiplier) {
	        var multiplier = 2;
	        var borders = 5;
		    if(this.dirX > 0 && this.x > this.cW - borders - width){
	            this.degree = 90; 
	            this.dirX = 0; 
	            this.dirY = 1;
	            this.x = cW - borders;
	        }
	        else if(this.dirY > 0 && this.y > this.cH - borders - width){
	            this.degree = 180; 
	            this.dirX = -1; 
	            this.dirY = 0;
	            this.y = this.cH - borders;
	        }
	        else if(this.dirX < 0 && this.x < borders + width){
	            this.degree = -90; 
	            this.dirX = 0; 
	            this.dirY = -1;
	            this.x = borders;
	        }
	        else if(this.dirY < 0  && this.y < borders + width){
	            this.degree = 0; 
	            this.dirX = 1; 
	            this.dirY = 0;
	            this.y = borders;
	        }
	        
	        this.x += this.dirX * multiplier;
	        this.y += this.dirY * multiplier;
	            
            
            this.render();
           }
      	 
      }
      function animate() {
     	ctx.clearRect(0, 0, this.cW, this.cH);	
     	draw.forEach(function(object) {
        object.render(2);
        });
     	requestAnimationFrame(animate);
     	}
 	  
      function init() {
        this.canvas = document.getElementById("my_canvas");
        this.ctx = canvas.getContext("2d");
        this.degree = Math.PI / 2;  
     
        
        draw = [];
        draw.push(new Drawing(5, 5, 80, 60, new Direction(1,0), "#E5E5E5"));
        
        animate();
      
      }
      
		window.onload = init;
    
    </script>

＆＃13;

<canvas id="my_canvas" width="1000" height="800" style="background-color:#33CC33"></canvas>

＆＃13;

＆＃13;

＆＃13;