【发布时间】：2015-06-10 00:05:51
【问题描述】：
大家好，
我正在尝试制作一种游戏。但它的进展并不顺利..
如果您查看下面我的游戏并运行它，您会在顶部看到红色和绿色的对象。在这些对象之后是数字，例如：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>
【问题讨论】：
标签： javascript canvas text-alignment