为什么我的 textalign 不可编辑？

Question

大家好，

我正在尝试制作一种游戏。但这不是很顺利..

如果您查看下面我的游戏片段，运行您会在顶部看到红色和绿色的对象。在这些对象之后是数字，例如：200/200。洞顶放在legenda.draw()

下面

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

但是如果你看一下带有 "klaar" 的红色方块，我想要那个 textAlign = "center"。正方形位于 koopscherm.draw().

下

现在你知道我想要什么了，我可以告诉你我的问题。当我运行脚本时，所有文本都居中。我只希望正方形居中（<-- 不知道怎么写）。

我发现如果我先运行 legenda.draw() 然后 koopscherm.draw() 问题就解决了。但是对于我的游戏来说，首先运行 koopscherm.draw().

很重要

Sooo.. 我希望 koopscherm.draw() 的文本在中间，legenda.draw() 的文本作为默认文本。

谢谢你的帮助！

<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>

Answer 1

textAlign 的默认值为 start（没有 initial）。无法识别的值只是 ignored（我强调）：

The textAlign IDL attribute, on getting, must return the current value. On setting, if the value is one of start, end, left, right, or center, then the value must be changed to the new value. Otherwise, the new value must be ignored.

希望对您有所帮助。

为什么我的 textalign 不可编辑？

why is my textalign not editable?

javascript

canvas

text-alignment