为什么我的textalign不可编辑？

Heyy guys，为什么我的textalign不可编辑？

我想做一种游戏。但它不会很好..

如果你看看我的游戏下面的一块并运行它，你会看到顶部的红色和绿色的物体。这些对象之后的数字是：200/200。洞顶置于legenda.draw()

我想要的只是textAlign = "initial"这些数字的默认值。

但是，如果你看着“klaar”的红色正方形，我想要那个textAlign = "center"。广场位于koopscherm.draw()之下。

现在你知道我想要什么我可以告诉你我的问题。当我运行脚本时，所有文本都居中。我只想让广场成为中心（< - 不知道怎么写）。

我发现如果我第一次运行legenda.draw()，然后koopscherm.draw()问题就解决了。但对于我的比赛来说，首先运行koopscherm.draw()非常重要。

Sooo ..我希望koopscherm.draw()的文字位于中心位置，legenda.draw()默认位置。

Thnx为您提供所有帮助！

<head> 

<style> 
    body{ 
     background-color:white; 
    } 
    * {cursor: none;} 
</style> 

</head> 
<body> 

<script> 
    function Canvas(){ 
     var ctx = document.getElementById('game').getContext('2d'); 
     var cw = ctx.canvas.width; 
     var ch = ctx.canvas.height; 

     var keys = []; 

     var cursor = new Image(); 
     cursor.src = "nothing" 

     function legenda(){ 
      this.x = 10, this.y = 10, this.w = 160, this.h = 23, this.color = "black", this.max = cw*0.125, this.geld = 0; 
      this.x2 = cw*0.6, this.y2 = 10, this.w2 = 160, this.h2 = 23, this.color2 = "black", this.alle_lv = 200, this.aantal_lv = this.alle_lv; 
      this.w3 = cw, this.h3 = ch*0.1, this.x3 = 0, this.y3 = 0, this.color3 = "lightgray", this.trans3 = 0.5; 
      this.st_w = 0, this.st_h = this.h/1.1, this.st_x = this.x + (this.x-(this.x/1.1)), this.st_y = this.y + (this.y-(this.y/1.1)), this.st_color = "red"; 
      this.st_w2 = 0, this.st_h2 = this.h2/1.1, this.st_x2 = this.x2 + (this.x2-(this.x2/1.0025)), this.st_y2 = this.y2 + (this.y2-(this.y2/1.1)), this.st_color2 = "#33CC33"; 
      this.const_plus = 7/100, this.const = this.w*0.99/7, this.const2 = this.w2*0.99/200; 
      this.draw = function(){ 
       //menu balk 
       ctx.globalAlpha = this.trans3 
       ctx.fillStyle = this.color3; 
       ctx.fillRect(this.x3,this.y3,this.w3,this.h3); 

       //check 
       ctx.globalAlpha = 1; 

       // magazijn 
        //zwarte achtergrond 
        ctx.fillStyle = this.color; 
        ctx.fillRect(this.x,this.y,this.w,this.h); 

        //aantal magazijn 
        this.st_w = 0; 
        for(var i=0;i<7;i++){ 
         this.st_w+=this.const 
        } 

        ctx.fillStyle = this.st_color; 
        ctx.fillRect(this.st_x,this.st_y,this.st_w,this.st_h); 

        //magazijn in nummers 
        ctx.font="17px Arial"; 
        ctx.textBaseline="middle"; 
        ctx.textAlign = "initial"; 
        ctx.fillStyle = "black"; 
        var text = Math.round(7)+"/"+7; 
        ctx.fillText(text,this.x+this.w+7.5,this.y+this.h*0.5,this.max); 


       // levens van het fort 
        //zwarte achtergrond 
        ctx.fillStyle = this.color2; 
        ctx.fillRect(this.x2,this.y2,this.w2,this.h2); 

        //stukjes2 
        this.st_w2 = 0; 
        for(var i=0;i<200;i++){ 
         this.st_w2+=this.const2 
        } 

        ctx.fillStyle = this.st_color2; 
        ctx.fillRect(this.st_x2,this.st_y2,this.st_w2,this.st_h2); 

        //levens in nummers 
        ctx.font="17px Arial"; 
        ctx.textBaseline = "middle"; 
        ctx.textAlign = "initial"; 
        ctx.fillStyle = "black"; 
        var text = Math.round(200)+"/"+200; 
        ctx.fillText(text,this.x2+this.w2+7.5,this.y2+this.h2*0.5,this.max); 


       // geld 
        //geld in nummers 
        ctx.font="17px Arial"; 
        ctx.textBaseline = "middle"; 
        ctx.textAlign = "center" 
        ctx.fillStyle = "black"; 
        var text = "\u20AC"+this.geld; 
        ctx.fillText(text,cw*0.48,this.y2+this.h2*0.5,cw*0.12); 
      } 
     } 


     function koopscherm(){ 
      this.tekst = [({"text":"Klaar","font":"17px Arial","Baseline":"middle","textAlign":"center","color":"black","x":cw*0.03+(cw*0.45*0.5),"y":ch*0.88+(ch*0.08*0.5),"max":cw*0.45})]; 
      this.vierkanten = [ 
           {"x":cw*0.03,"y":ch*0.88,"w":cw*0.45,"h":ch*0.08,"color":"lightgray"} 
           ]; 
      this.draw = function(){ 
       //draw 
       for(var i=0;i<this.vierkanten.length;i++){ 
        var v = this.vierkanten[i]; 
        ctx.fillStyle = v.color; 
        ctx.fillRect(v.x,v.y,v.w,v.h); 
       } 
       for(var i=0;i<this.tekst.length;i++){ 
        var v = this.tekst[i]; 
        ctx.font = v.font; 
        ctx.textBaseline = v.Baseline; 
        ctx.textAlign = v.textAlign; 
        ctx.fillStyle = v.color; 
        ctx.fillText(v.text,v.x,v.y,v.max); 
       } 
       //check 
       ctx.textAlign = "initial"; 

       //muis 
       //ctx.drawImage(cursor,this.x2,this.y2,12,22); 
      } 
     } 

     var legenda = new legenda(); 
     var koopscherm = new koopscherm(); 

     function draw() { 
      ctx.save(); 
      ctx.clearRect(0,0,cw,ch); 

      //draw 

      koopscherm.draw(); 
      legenda.draw(); 

      ctx.restore(); 
     } 

     var animateInterval = setInterval(draw,1); 

     ctx.canvas.addEventListener('click', function(event){ 
      koopscherm.dx = event.clientX; 
      koopscherm.dy = event.clientY; 
     }); 
    } 

    window.addEventListener('load', function(event) { 
      Canvas(); 
    }); 
</script> 

<div id="center_canvas"> 
<canvas id="game" width="650px" height="450px"> 
    Je hebt een nieuwere browser nodig om dit te spelen! 
</canvas> 
</div> 
</body> 
<html>

来源

2015-04-05 Thomas Pereira