Heyy guys,Почему мой текст не редактируется?
Я пытаюсь сделать что-то вроде игры. Butt это не очень хорошо ..
Если вы посмотрите на часть моей игры ниже и запустите ее, вы увидите красные и зеленые объекты в верхней части. После этих объектов будут цифры типа: 200/200. Верхняя часть отверстия находится под legenda.draw()
Я хочу, чтобы textAlign = "initial" просто по умолчанию для этих чисел.
Но если вы посмотрите на красный квадрат с «klaar», я хочу, чтобы он был textAlign = "center". Квадрат находится под koopscherm.draw().
Теперь вы знаете, что я хочу, я могу рассказать вам о своей проблеме. Когда я запускаю скрипт, весь текст центрируется. И я хочу, чтобы квадрат был centererd (< - не знаю, как писать).
Я узнал, что если я сначала запустил 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>
да это сработало для меня !, просто такая маленькая вещь ... Thnx btw –