Question

问题是“位置”变量没有更新，以使数字显示彼此相邻而不是彼此重叠。

我也尝试将它放在原型函数中，认为如果它在运行drawImage函数之前就已经更新了它会起作用......但它没有，我不明白问题是什么。

<pre>

var sprite = new Image();
     sprite.src = "Flappy_Bird_Sprite.png"

function drawSprite (img, x_crop, y_crop, x_width, y_height, x_pos, y_pos, x_posWidth, y_posHeight) {
    this.img = img;
    this.x_crop = x_crop;
    this.y_crop = y_crop;
    this.x_width = x_width;
    this.y_height = y_height;
    this.x_pos = x_pos;
    this.y_pos = y_pos;
    this.x_posWidth = x_posWidth;
    this.y_posHeight = y_posHeight;
}

   var position = 10;   
   drawSprite.prototype.draw = function () {

       ctx.drawImage(this.img, this.x_crop, this.y_crop, this.x_width, this.y_height, this.x_pos, this.y_pos, this.x_posWidth, this.y_posHeight);
   }
                 var arr = [
                    new drawSprite(sprite, 137, 306, 7, 10, position, 50, 20, 40), 
                    new drawSprite(sprite, 139, 477, 5, 10, position, 50, 15, 40),
                    new drawSprite(sprite, 292, 160, 12, 18, position, 50, 15, 40),
                    new drawSprite(sprite, 306, 160, 12, 18, position, 50, 15, 40),
                    new drawSprite(sprite, 320, 160, 12, 18, position, 50, 15, 40),
                    new drawSprite(sprite, 334, 160, 12, 18, position, 50, 15, 40),
                    new drawSprite(sprite, 292, 184, 12, 18, position, 50, 15, 40),
                    new drawSprite(sprite, 306, 184, 12, 18, position, 50, 15, 40),
                    new drawSprite(sprite, 320, 184, 12, 18, position, 50, 15, 40),
                    new drawSprite(sprite, 334, 184, 12, 18, position, 50, 15, 40),
                    ]


     var increment = 0;

 function animate () {
     requestAnimationFrame(animate);
     increment++;

     if (increment % 10 == 0){
         score++;
     }
    ctx.clearRect(0, 0, canvas.width, canvas.height);

                var tString  = score.toString(); //Makeing the score into a string so I can select each number with the substring function
                var length = tString.length; //Finding out the length of the string(in our case is 2)

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

                    var substring = tString.substring(i,i+1); //Selecting each digit of that number in order to draw each of them separately
                    var toNumber = parseInt(substring); //Setting that "string" back into a number so I can acces that number in the array

                     if( length == 2 ) { //I am trying to make this work for 2 digit number(10-99) and if this works, then I will add 3 digits and so on, I know that this should work only for numbers from 10-99

                            if( i == 0){ // Position the first digit of that number at the position ....
                                position = 180;
                            } 
                            if( i == 1){ // Position the second digit of that number at the position ....
                                position = 105;
                            } 

                    }        
                    arr[toNumber].draw();

            }     
 }

 animate();

<code>

Answer 1

您对new drawSprite的调用都使用position的相同值，该值在您创建这些对象时固定。

您可以在绘制之前尝试更新精灵实例：

arr[toNumber].x_pos = position;
arr[toNumber].draw();

如何使drawImage在canvas中定位一个变量

1 个答案: