キャンバスでのオブジェクトの並べ替え

テキストを上にして矩形を使用して2つのボトンを描画します。ご覧のとおり、同じループを使用して2つの異なる結果が得られます。最初の「ボタン」は、ボックスの後ろにテキストが隠されています。 2番目にはテキストが上に書かれています。これはなぜですか？並べ替えはどのようにキャンバスで動作しますか？ここでキャンバスでのオブジェクトの並べ替え

<body> 
    <canvas id="canvas" width="320" height="512" 
    style="position: absolute; left: 500px; top: 50px; z-index: 1;"></canvas> 
<script> 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext("2d"); 
canvas.style.backgroundColor = 'rgba(0, 0, 0, 0)'; 
context.clearRect(0, 0, 320, 16); 
gameMenu(); 

function gameMenu(){ 
var buttons = [ {x: 210, y: 420, w: 80, h: 30, s: "Messages"}, 
       {x: 210, y: 470, w: 80, h: 30, s: "Pause"} ], i = 0, r; 

    while(r = buttons[i++]) { 
    context.rect(r.x, r.y, r.w, r.h); 
    context.fillStyle = "rgb(26,26,26)"; 
    context.fill(); 

    context.fillStyle = 'White'; 
    context.font = "16px Tahoma"; 
    context.fillText(r.s, r.x + 18, r.y + 22); 
    } 
} 
</script> 
</body>

はJSフィドルです： https://jsfiddle.net/oa84Lsxn/1/

出典

2016-04-14 Lloyd

何のソートはありません、あなたはボトムアップから、正しい順序でオブジェクトを描画する必要があります。 – Cyclonecode

@サイクロン。良い情報ですが、質問者には別の問題があります。 ;-) – markE

あなたはcontext.beginPathとそれぞれの新しいパスの操作（==それぞれの新しい.rect）を開始する必要があります。それ以外の場合、すべての以前の.rectが現在の.rectと共に再描画されます。

問題は、以前のすべてのパスが新しいパスとともに再描画されることです。つまり、最初の矩形が新しい2番目の矩形と共に再描画され、最初の矩形のテキストが最初の矩形で上書きされます。

あなたのコードはcontext.beginPathで追加されました。

var canvas=document.getElementById("canvas"); 
 
var context = canvas.getContext("2d"); 
 
canvas.style.backgroundColor = 'rgba(0, 0, 0, 0)'; 
 
context.clearRect(0, 0, 320, 16); 
 
gameMenu(); 
 

 
function gameMenu(){ 
 
// x,y changed to fit demo on StackSnipped window 
 
var buttons = [ {x: 40, y: 20, w: 80, h: 30, s: "Messages"}, 
 
       {x: 40, y: 70, w: 80, h: 30, s: "Pause"} ], 
 
       i = 0, r; 
 

 
    while(r = buttons[i++]) { 
 
     context.beginPath(); 
 
     context.rect(r.x, r.y, r.w, r.h); 
 
     context.fillStyle = "rgb(26,26,26)"; 
 
     context.fill(); 
 

 
     context.fillStyle = 'White'; 
 
     context.font = "16px Tahoma"; 
 
     context.fillText(r.s, r.x + 18, r.y + 22); 
 
    } 
 

 
}

#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

出典

2016-04-14 18:17:49 markE

ありがとう！：D 大きな説明。 – Lloyd

@Lloydまたは、rect（）+ fill（）の代わりにfillRect（）を使用してください。 markEが質問に答えた場合は、それを受け入れたとマークしてください。それは質問を終わらせ、回答者に努力のいくつかのポイントを与えるでしょう。 – K3N

申し訳ありませんが、私はそれを閉じる方法を理解できませんでした。それは緑のチェックマークだった:) – Lloyd

キャンバスでのオブジェクトの並べ替え

答えて

関連する問題