我的问题是有关在HTML画布绘制函数中没有画出。 我尝试使用Canvas绘制“交易卡”来创建游戏。 所以我决定写一个函数来获取所有必要的信息来绘制不同的卡片。 对于一张卡片 - 没问题。但如果我尝试在第一张卡的顶部绘制另一张卡,则可以通过第二张卡看到第一张卡上的图像。图片背景(画布)
这里的源代码:
function RoundRect(x,y,scale,lvl,mage,headline,text,HP,MP,AtckP,DefP,MDefP){
//Kartenumriss zeichnen
context.strokeStyle="rgb(0,0,0)";
context.fillStyle="rgb(180,180,180)";
context.lineWidth=2*scale;
context.beginPath();
context.moveTo(x+10*scale,y+0*scale);
context.lineTo(x+90*scale,y+0*scale);
context.arcTo(x+100*scale,y+0*scale,x+100*scale,y+10*scale,10*scale);
context.lineTo(x+100*scale,y+110*scale);
context.arcTo(x+100*scale,y+120*scale,x+90*scale,y+120*scale,10*scale);
context.lineTo(x+10*scale,y+120*scale);
context.arcTo(x+0*scale,y+120*scale,x+0*scale,y+110*scale,10*scale);
context.lineTo(x+0*scale,y+10*scale);
context.arcTo(x+0*scale,y+0*scale,x+10*scale,y+0*scale,10*scale);
context.fill();
context.stroke();
//innerer Kartenumriss zeichnen
context.strokeStyle="rgb(0,0,0)";
context.lineWidth=2*scale;
context.beginPath();
context.moveTo(x+20*scale,y+10*scale)
context.lineTo(x+80*scale,y+10*scale);
context.arcTo(x+80*scale,y+20*scale,x+90*scale,y+20*scale,10*scale);
context.lineTo(x+90*scale,y+100*scale);
context.arcTo(x+80*scale,y+100*scale,x+80*scale,y+110*scale,10*scale);
context.lineTo(x+20*scale,y+110*scale);
context.arcTo(x+20*scale,y+100*scale,x+10*scale,y+100*scale,10*scale);
context.lineTo(x+10*scale,y+20*scale);
context.arcTo(x+20*scale,y+20*scale,x+20*scale,y+10*scale,10*scale);
context.lineCap="square";
context.stroke();
//Textfeld zeichnen
context.strokeStyle="rgb(0,0,0)";
context.fillStyle="rgb(0,0,0)";
context.lineWidth=2*scale;
context.beginPath();
context.moveTo(x+90*scale,y+65*scale);
context.lineTo(x+90*scale,y+100*scale);
context.arcTo(x+80*scale,y+100*scale,x+80*scale,y+110*scale,10*scale);
context.lineTo(x+20*scale,y+110*scale);
context.arcTo(x+20*scale,y+100*scale,x+10*scale,y+100*scale,10*scale);
context.lineTo(x+10*scale,y+65*scale);
context.arcTo(x+20*scale,y+65*scale,x+20*scale,y+75*scale,10*scale);
context.lineTo(x+80*scale,y+75*scale)
context.arcTo(x+80*scale,y+65*scale,x+90*scale,y+65*scale,10*scale)
context.lineCap="square";
context.fill();
context.stroke();
//lvl zeichnen
shift=0;
for(var greystar=0;greystar<=4; greystar++){
context.strokeStyle="rgb(100,100,100)";
context.fillStyle="rgb(100,100,100)";
context.beginPath();
context.moveTo(shift+x+23.33*scale,y+112*scale);
context.lineTo(shift+x+25.33*scale,y+118.66*scale);
context.lineTo(shift+x+20*scale,y+114.53*scale);
context.lineTo(shift+x+26.66*scale,y+114.53*scale);
context.lineTo(shift+x+21.26*scale,y+118.66*scale);
context.lineTo(shift+x+23.33*scale,y+112*scale);
context.fill();
shift+=13.5*scale;
}
shift=0;
while(lvl>0){
context.strokeStyle="yellow";
context.fillStyle="yellow";
context.beginPath();
context.moveTo(shift+x+23.33*scale,y+112*scale);
context.lineTo(shift+x+25.33*scale,y+118.66*scale);
context.lineTo(shift+x+20*scale,y+114.53*scale);
context.lineTo(shift+x+26.66*scale,y+114.53*scale);
context.lineTo(shift+x+21.26*scale,y+118.66*scale);
context.lineTo(shift+x+23.33*scale,y+112*scale);
context.fill();
shift+=13.5*scale;
lvl--;
}
//Bild einbinden
var chucknorris = new Image();
chucknorris.onload = function() {
context.drawImage(chucknorris,x+18*scale,y+18*scale,64*scale,49*scale);
};
chucknorris.src="pics/chucknorris.png";
//Symbole einbinden
//life
var life = new Image();
life.onload = function() {
context.drawImage(life,x+87*scale,y+11*scale,7*scale,7*scale);
};
life.src="pics/heart_small.png";
//magic
var magic = new Image();
magic.onload = function() {
context.drawImage(magic,x+6*scale,y+11*scale,7*scale,7*scale);
};
magic.src="pics/magic_small.png";
if(mage==true){
//wand
var wand = new Image();
wand.onload = function() {
context.drawImage(wand,x+6*scale,y+102*scale,7*scale,7*scale);
};
wand.src="pics/wand_small.png";
}
else{
//sword
var sword = new Image();
sword.onload = function() {
context.drawImage(sword,x+6*scale,y+102*scale,7*scale,7*scale);
};
sword.src="pics/sword_crossed_small.png";
}
//shield
var shield = new Image();
shield.onload = function() {
context.drawImage(shield,x+85*scale,y+102*scale,7*scale,7*scale);
};
shield.src="pics/shield_small.png";
//magic_shield
var magic_shield = new Image();
magic_shield.onload = function() {
context.drawImage(magic_shield,x+91*scale,y+102*scale,7*scale,7*scale);
};
magic_shield.src="pics/magic_shield_small.png";
//Text einfügen
context.font = 'bold '+4*scale+'px Calibri';
context.fillStyle = 'rgb(255,255,255)';
context.fillText(headline,x+20*scale, y+80*scale);
context.font = 'normal '+3*scale+'px Calibri';
context.fillStyle = 'rgb(255,255,255)';
wrapText(context, text, x+20*scale, y+85*scale, maxWidth, lineHeight, scale);
//HP anzeigen
context.font = 'bold 20pt Calibri';
context.fillStyle = 'rgb(255,0,0)';
var textmetric = context.measureText(HP);
var textwidth = textmetric.width/2;
context.fillText(HP,x-textwidth+90.25*scale, y+10*scale);
//MP anzeigen
context.fillStyle = 'rgb(0,0,255)';
textmetric = context.measureText(MP);
textwidth = textmetric.width/2;
context.fillText(MP,x-textwidth+9.5*scale, y+10*scale);
//AtckP anzeigen
context.fillStyle = 'rgb(0,0,0)';
textmetric = context.measureText(AtckP);
textwidth = textmetric.width/2;
context.fillText(AtckP,x-textwidth+9.5*scale, y+115*scale);
//DefP und MDefP anzeigen
context.fillStyle = 'rgb(0,0,0)';
var DefAll = DefP+'/'+MDefP;
textmetric = context.measureText(DefAll);
textwidth = textmetric.width;
context.fillText(DefAll,x-textwidth+98*scale, y+115*scale);
};
我认为重要的部分是“图片报// einbinden”和“//文字einfügen”之间,但我不知道这一点。
的功能在测试代码以后像这样使用:
RoundRect(0,0,4,5,false,'Chuck Norris','Wenn Chuck Norris spricht, hört Gott zu!!! Chuck Norris` Tränen können Krebs heilen. Nur schade dass er niemals weint!!! Chuck Norris geht manchmal Blut spenden. Nur nie sein eigenes. Und wenn doch, dann mit ner Knarre und nem Eimer!!!','100','0','120','20','60');
RoundRect(100,120,4,2,false,'Chuck Norris Vers 0.3','Wenn Chuck Norris spricht, hört Gott zu!!! Chuck Norris` Tränen können Krebs heilen. Nur schade dass er niemals weint!!! Chuck Norris geht manchmal Blut spenden. Nur nie sein eigenes. Und wenn doch, dann mit ner Knarre und nem Eimer!!!','50','100','60','10','30');
下面的结果:
我希望有一个人谁可以帮助我。预先感谢您(< - 希望Google-Tranlator就在这里 - 听起来对我来说是错误的...)。
编辑: 我想出了一部分问题,但我仍然需要一个解决方案: 我试着在代码中设置一些“alert()”。结果是interessting:首先,从第一张卡的背景画出。然后是第二张牌的背景。之后,第一张卡片的图像被绘制,然后其他卡片从第二张卡片中拉出。因此绘制了其他所有绘制的图像。 所以问题是如何告诉Canvas立即绘制图像,或者至少在函数内绘制图像。
谢谢你。我会无论如何读这篇文章。但是我想首先测试enhzflep的解决方案^^ – Sandro