私の質問は、HTML Canvas の関数を使用した描画についてです。Canvasで「トレーディングカード」を描いてゲームを作ってみました。そこで、さまざまなカードを引くために必要なすべての情報を取得する関数を作成することにしました。1 枚のカードの場合 - 問題ありません。しかし、最初のカードの上に別のカードを引こうとすると、最初のカードの画像が 2 番目のカードを通して見えてしまいます。
ソースコードは次のとおりです。
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);
};
重要な部分は「//Bild einbinden」と「//Text 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();」を設定しようとしました。結果は興味深いものでした。まず、最初のカードの背景が描かれます。続いて2枚目のカードの背景。その後、最初のカードの画像が描かれ、次に 2 番目のカードから他の画像が描かれます。したがって、他のすべてが描画された後に描画される画像。したがって、問題は、キャンバスに画像をすぐに、または少なくとも関数内で描画するように指示する方法です。