Question

Heyy伙计们，

我正试图制作一种游戏。但它不是很顺利..

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

之下

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

但如果你用＆＃34; klaar＆＃34;来看红色广场，我希望那个textAlign = "center"。该方块位于koopscherm.draw()下。

现在你知道我想要什么我可以告诉你我的问题。当我运行脚本时，所有文本都居中。而且我希望广场是centererd（＆lt; - 不知道怎么写）。

我发现如果我先运行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>

Answer 1

textAlign的默认值为start（没有initial）。一个无法识别的值只是ignored（我的重点）：

获取时，textAlign IDL属性必须返回当前值值。在设置时，如果值是开始，结束，左，右或者之一中心，然后必须将值更改为新值。的否则，必须忽略新值。

希望这有帮助。

为什么我的textalign不可编辑？

1 个答案: